blakehaswell · February 28, 2013 10:32
diff --git a/css-search.html b/css-search.html
 <!doctype html>

 <html>
    <head>
        <title>Search Box in CSS</title>
        
        <style>
            body {
                background-color: #eee;
                margin: 0;
                padding: 80px;
            }
            
            .searchForm {
                overflow: hidden;
            }
            
            .searchForm-input,
            .searchForm-button {
                float: left;
                
                font-family: sans-serif;
                font-size: 0.75em;
                line-height: 1.5;
                
                margin: 0;
                padding: 5px 10px;
            }
            
            .searchForm-input {
                width: 150px;
                
                border: solid #aaa;
                border-width: 1px 0 1px 1px;
                border-radius: 50px 0 0 50px;
                background-color: #fff;
                box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
                color: #333;
            }
            
            .searchForm-input::-webkit-input-placeholder {
                color: #999;
            }
            
            .searchForm-input:-moz-placeholder {
                color: #999;
            }
            
            .searchForm-button {
                border: 1px solid #666;
                border-radius: 0 50px 50px 0;
                background-color: #888;
                background-image: -webkit-linear-gradient(top, #888, #666);
                background-image: -moz-linear-gradient(top, #888, #666);
                background-image: -ms-linear-gradient(top, #888, #666);
                background-image: -o-linear-gradient(top, #888, #666);
                background-image: linear-gradient(top, #888, #666);
                box-shadow: inset 0 1px rgba(255, 255, 255, 0.3);
                color: #fff;
                
                padding-right: 15px;
            }
        </style>
    </head>
    
    <body>
        
        <form class="searchForm" action="#" method="get">
            <input class="searchForm-input" type="text" placeholder="Search" />
            <button class="searchForm-button" type="submit">Go</button>
        </form>
        
    </body>
 </html>
	<!doctype html>

	<html>
	<head>
	<title>Search Box in CSS</title>

	<style>
	body {
	background-color: #eee;
	margin: 0;
	padding: 80px;
	}

	.searchForm {
	overflow: hidden;
	}

	.searchForm-input,
	.searchForm-button {
	float: left;

	font-family: sans-serif;
	font-size: 0.75em;
	line-height: 1.5;

	margin: 0;
	padding: 5px 10px;
	}

	.searchForm-input {
	width: 150px;

	border: solid #aaa;
	border-width: 1px 0 1px 1px;
	border-radius: 50px 0 0 50px;
	background-color: #fff;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
	color: #333;
	}

	.searchForm-input::-webkit-input-placeholder {
	color: #999;
	}

	.searchForm-input:-moz-placeholder {
	color: #999;
	}

	.searchForm-button {
	border: 1px solid #666;
	border-radius: 0 50px 50px 0;
	background-color: #888;
	background-image: -webkit-linear-gradient(top, #888, #666);
	background-image: -moz-linear-gradient(top, #888, #666);
	background-image: -ms-linear-gradient(top, #888, #666);
	background-image: -o-linear-gradient(top, #888, #666);
	background-image: linear-gradient(top, #888, #666);
	box-shadow: inset 0 1px rgba(255, 255, 255, 0.3);
	color: #fff;

	padding-right: 15px;
	}
	</style>
	</head>

	<body>

	<form class="searchForm" action="#" method="get">
	<input class="searchForm-input" type="text" placeholder="Search" />
	<button class="searchForm-button" type="submit">Go</button>
	</form>

	</body>
	</html>