problema con un search en CSS

[wilson_romero]

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]

[Rafael]

No se entiende. :o(

Acá está tu código. Ajústalo para que se vea más claro que quieres y pícale Update, entonces copia el link acá otra vez:

https://jsfiddle.net/z36stzzh/


A ver. Quité un montón de cosas que no son del ejemplo.

Le quité la posición descabellada del left, top, esos los vuelves a poner luego y cambié el focus por hover. También el width 30% por un valor fijo en pixeles.

https://jsfiddle.net/z36stzzh/1/

Revisa que es lo que no te funciona.