,

Simple Widget Blogger search box with pure CSS.


Here the HTML:

<form id="searchthis" action="/search" style="display:inline;" method="GET" target="_top">
<!-- Search box for blogger by Namanyay Goel //-->
<input id="namanyay-search-box" name="q" size="40" type="text" placeholder="  Type Keywords... "/>
<input id="namanyay-search-btn" value="Search" type="submit"/>
</form>

The Pure CSS

#namanyay-search-btn {
background:#0099ff;
color:white;
font: 'trebuchet ms', trebuchet;
padding:10px 20px;
border-radius:0 10px 10px 0;
-moz-border-radius:0 10px 10px 0;
-webkit-border-radius:0 10px 10px 0;
-o-border-radius:0 10px 10px 0;
border:0 none;
font-weight:bold;
}
 
#namanyay-search-box {
background: #eee;
padding:10px;
 border-radius:10px 0 0 10px;
-moz-border-radius:10px 0 0 10px;
-webkit-border-radius:10px 0 0 10px;
-o-border-radius:10px 0 0 10px;
border:0 none;
width:160px;
 }

DEMO


See the pen on CodePen.

This article helpful ?. Please share us