Tengo esta estructura:
Código HTML:
<div id="buscador">
<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
<div id="search">
<input class="searchinput" type="text" placeholder="Buscar..." value="" onclick="this.value='';" name="s" id="s" />
<input type="submit" class="searchsubmit" value="Buscar" id="searchsubmit"/>
</div>
</form>
</div>
Y este diseño:
Código HTML:
#buscador {
float: right;
margin-top: 36px;
padding: 0;
}
form {
margin: 0;
padding: 0;
}
#searchform {
margin: 0;
padding: 0;
line-height: 27px;
}
.searchinput {
border: 1px solid #FFAF00;
width: 160px;
height: 22px;
float: left;
padding: 0 5px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
-khtml-border-top-left-radius: 3px;
-khtml-border-bottom-left-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-bottomleft: 3px;
-webkit-border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
}
.searchinput:focus {
border: 1px solid #FFAF00;
}
#searchsubmit {
border: 1px solid #FFAF00;
width: 27px;
height: 22px;
display: block;
float: left;
cursor: pointer;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
-khtml-border-top-right-radius: 3px;
-khtml-border-bottom-right-radius: 3px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 3px;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
}
Y mi idea es que quede parecido como en este foro pero sin imagenes.
Mi web de prueba: http://www.seravifer.familiapixel.com