Tengo un serch con un efecto que cuando le dan click se pone grande, esto lo puse un div para moverlo por donde quiero, Pero este div necesita un espacio"al parecer " para que anche (width)
este es el código
HTML Código HTML:
<div id="menu-up">
<div class="center">
<div class="logo"><img src="img/logo_over.png" height="24" width="143">
<div class="inicio"><a class="tex-cabeza" href="">inicio</a></div> <!-- Nuevo-->
<div class="sesion"><a class="tex-cabeza" href="">iniciar sesion</a></div> <!-- Nuevo-->
<!-- nuevo el search-->
<form>
<div class="search"><input type="search" name="search" placeholder="Search.."></div>
</form>
</div>
</div><!--center-->
</div> <!-- down final -->
CSS
[CSS].search{
position: absolute;
top: -16px; /*posicion de cordenadas */
left: 1110px;/*posicion de cordenadas */
float: left;
width: 300px;
height: 0px;
margin: 0px ;
padding: -10px 10px 0px 0px;
border: 3px solid #73AD21;
}
/* nuevo el search */
input[type=search] {
width: 62px;
height: 24px;
box-sizing: border-box; /* ? */
border: 2px solid #ccc;
border-radius: 4px;
font-size: 14px;
background-color: white;
background-image: url("../img/lupa.png"); /*nuevo no funciona como los demas */
background-position: 8px 5px; /*posicion de la lupa */
background-repeat: no-repeat;
padding: 12px 20px 12px 40px; /* pading dentro de el search */
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=search]:focus {
width: 30%;
}[/CSS]