How would you create this search box look with css?

HTML & CSS
1

With this markup…[ can’t change :slight_smile: ]

<div class="menu side widget_search"><form action="http://mysite.com" id="cse-search-box"> 
  <div> 
    <input type="text" name="q" size="31" /> 
    <input type="submit" name="sa" value="" /> 
  </div> 
</form> 
</div>

The search box (the curved portion in the art example) will be absolutely positioned over the light gray background, so no need to create that background. The boundary of the search box should be the curved area.

I’d prefer not to use an image(s) for the rounded corner effect and instead, let non border-radius browsers just have a square box.

I will use a semi-transparent png to get the “pill” reflection effect in the background of the search box.

The tricky part I think is to overlay the search icon (can be an image) over the right edge of the search input field.

2

use the CSS border radius for the curved edges, and to get the search icon simply put the image of it as a background image in the search box, then use background-position to shift it over to the right.

3

Here’s what I came up with. This allows you to drag a default WordPress search widget over to a sidebar and get the styling like the pic I posted in the opening post…

.widget_search {
	background:#fff; 
	padding:5px; 
	height:21px; 
	width:200px;
	border:1px solid #777; 
	border-radius:17px; 
	-moz-border-radius:17px; 
	-webkit-border-radius:17px; 
	position:absolute; 
	top:145px; 
	right:38px; }

#searchform .screen-reader-text {
	display:none;
}
#searchform #searchsubmit, #cse-search-box input[type="submit"] {  
	width: 26px;  
	height: 23px; 
	vertical-align:top; 
	margin:-1px 0 0 0; 
	color:#ccc;  
	padding: 0;  
	border: 0;  
	background: url(search.png) center top no-repeat;  
	text-indent: -1000px; 
	font-size:0; 
	cursor: pointer; 
	cursor: hand;  
	}

#searchform, #cse-search-box {
	background:#fff; 
	margin:0 0 0 -20px; 
	padding:0; 
	}

#searchform #s, #cse-search-box input[type="text"] {
	width:182px; 
	height:20px; 
	margin:0; 
	border:none;
	}

The extra class and ID selectors are to account for the default WordPress search widget. The initial code I posted was the Google Adsense search widget stub markup (sans hidden inputs)

Here’s the final result in the live test site:

759×218 18.3 KB

I’m going to tweak the border effect a bit to get a closer match to the pic, but I’m happy with this for now.

I’ve included the transparent png you’ll need for the magnifying glass icon (should you decide to use this on your WordPress site or blog) …