Input con translacion

[phyronx]

Buenas, tengo el siguiente codigo, en plan demo:

Código HTML:

<style type="text/css">
 
.textbox_normal { background-color:#FFFFFF; width: 100px;}
.textbox_activado { background-color:#FFFFCC;color:#0000FF width: 200px;}
 
</style>
 
<p>
 
<input type="text" name="caja" size="30" maxlength="40" class="textbox_normal" onFocus="this.className='textbox_activado'" onblur="this.className='textbox_normal'"></p>
 

Necesito que al cambiar el input de tamño lo haga pero con una translacion, no de golpe, y no tengo ni idea de como hacerlo.

[phyronx]

Encontre otro codigo:

Código CSS:

<style>
 
.kk, textarea {  
    width: 280px;  
    -webkit-transition: width 1s ease;  
    -moz-transition: width 1s ease;  
    -o-transition: width 1s ease;  
    -ms-transition: width 1s ease;  
    transition: width 1s ease;  
}  
  
.kk:focus, textarea:focus {  
    width: 340px;  
} 
 
    
      
</style>
 

Esta vez para hacerlo sin javascript.

Código HTML:

<input class="kk" name="buscar"  type="text">
 

Pero igual, no me hace l;a translacion.

[Pleyano]

A mí me funciona perfectamente, el código está bien. Tal vez sea un problema de que tu navegador no soporta las transiciones (en Firefox 17 funciona correcto). Echale un vistazo a esta tabla a ver si te saca de dudas:

http://www.quirksmode.org/css/transitions.html

En cualquier caso, puedes utilizar la librería jQuery para lograr el efecto que quieres y compatible para todos los navegadores.

[pzin]

En elementos de formulario, la transición funciona igual que en cualquier otro elemento del HTML.