estilo en un input

[canela2]

Hola a todos
Como tengo que hacer para que en un formulario el campo texto de un input cuando el usuario está introduciendo datos salga del color que yo quiero.
Es decir, que si pregunto el nombre cuando lo está escribiendo que salga de color azul.
Tengo puesto esto pero no me lo hace
Tambien quiero que quite la sombra del cuadro
input {
border: 1px solid #EAEAEA;
color: #006699;
font-family: geneva,Arial;
font-size: 8pt;
font-style: normal;
}

Gracias.
canela2

[braulito]

Sólo cambia input { por input:focus {

Esto es CSS2, funcionará en todos los navegadores menos Internet Explorer. Aunque en esta página te dan una solución:

http://www.relativelyabsolute.com/articles/focus/

Saludos.

[quinqui]

bua, yo he hecho eso pero usando eventos dentro de los controles.... esto del CSS2 está super bueno ^___~ gracias! :D

[iconogt]

Hmmm, una pseudo clase... si es una buena manera de darle un aspecto curioso a un elemento input, o mejor dicho a un formulario, yo les doy un estilillo así:

Código:

<input type="text" value="Enviar" 
onfocus="this.style.backgroundColor='#f5f5f5'" onblur="this.style.backgroundColor=''" />

Slds...

[braulito]

Es mejor simplificar el código usando XHTML y CSS, te imaginas si tendrías un super formulario de 100 campos, y que para cada uno repitas los eventos onfocus y onblur????

[iconogt]

Si tienes mucha razón... lo que pasa es que yo no lo uso para muchos campos sino para algunos en especial, , y claro que es mil veces mejor usar una hoja de estilos externa (por ejemplo), así a la hora de editar la page es mucho mas cómodo.

Slds...

[quinqui]

eso es lo que hagi yo, iconogt :) pero al poner ese código en una variable no tienes que repetirla cada vez que escribes un campo ^_^U aunque el codigo html resultante sigue siendo pesado :p...

[makaton]

puedes quitarle la sombra asi:

border-color: #EAEAEA #EAEAEA #EAEAEA #EAEAEA;
border-style: solid;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;


si quieres tambien puedes quitarle el color al box para que se vea alguna imagen que tengas de fondo en tu web asi:

background-color: transparent;

[braulito]

y reduciendo ese código sería:

Código:

border: 1px solid #EAEAEA;
background-color: transparent;