Hi guys, Today I am going to share simple search box with select box option using css

Searchbox with selectbox option

Search Box with Select Option

CSS Code


#search-form { margin:70px 0 100px 170px; width:690px; overflow:hidden; }
#search-page-border { border:1px solid #dbdbdb; border-radius:4px; padding:7px; float:left; }
.search-terms { font-size:26px; border:none; }
#search-which { margin:0 10px; padding-left:8px; border-left:1px solid #dbdbdb; }
#search-which, select option { font-size:26px; }
#search-submit { padding:12px 30px; margin-left:20px; font-size:20px; float:left; color:#ffffff; background:#F00; border:none; border-radius: 3px; }
.accessibly-hidden {left: -999em;position: absolute;}

Html Code


<form action="#" method="post" id="search-form">
 <span id="search-page-border">
 <label class="accessibly-hidden">Search for:</label>
 <input type="text" class="search-terms" name="search-terms" onfocus="if(this.value == 'Search...') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Search...'; }" value="Search..." />
 <label for="search-which" class="accessibly-hidden">Search these:</label><select name="search-which" id="search-which" style="width: auto"><option value="members">Members</option><option value="groups">Groups</option><option value="forums">Forums</option><option value="posts">Posts</option></select> </span>
 <input type="submit" name="search-submit" id="search-submit" value="Search" />
</form>

Please don’t forget to share and subscribe to latest updates of the blog. Also any comments and feedback are all welcome!

Thanks!

If you enjoyed this article, Get email updates (It’s Free)
Search Box with Select Option using CSSKarthikeyan KCSS3Web DesignCascading Style Sheets,Design,tips & tricks
Hi guys, Today I am going to share simple search box with select box option using cssCSS CodeHtml CodePlease don’t forget to share and subscribe to latest updates of the blog. Also any comments and feedback are all welcome!Thanks!