Foros del Web » Creando para Internet » CSS »

estilo en un input

Estas en el tema de estilo en un input en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 01/07/2005, 11:49
 
Fecha de Ingreso: junio-2005
Mensajes: 67
Antigüedad: 12 años, 6 meses
Puntos: 0
estilo en un input

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
  #2 (permalink)  
Antiguo 01/07/2005, 13:11
Avatar de braulito  
Fecha de Ingreso: abril-2004
Ubicación: Cusco - Perú
Mensajes: 597
Antigüedad: 13 años, 7 meses
Puntos: 8
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.
__________________
Braulio Soncco
braulio at buayacorp dot com
Buayacorp - Programación y Diseño
  #3 (permalink)  
Antiguo 01/07/2005, 17:57
Avatar de quinqui  
Fecha de Ingreso: agosto-2004
Ubicación: Chile!
Mensajes: 776
Antigüedad: 13 años, 4 meses
Puntos: 56
bua, yo he hecho eso pero usando eventos dentro de los controles.... esto del CSS2 está super bueno ^___~ gracias! :D
__________________
pipus.... vieeeeeji plomius!!!
*quinqui site*
  #4 (permalink)  
Antiguo 01/07/2005, 19:38
Avatar de iconogt  
Fecha de Ingreso: septiembre-2004
Ubicación: Guatemala
Mensajes: 573
Antigüedad: 13 años, 3 meses
Puntos: 4
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...
__________________
_______
Jorge Rojas.
  #5 (permalink)  
Antiguo 02/07/2005, 01:47
Avatar de braulito  
Fecha de Ingreso: abril-2004
Ubicación: Cusco - Perú
Mensajes: 597
Antigüedad: 13 años, 7 meses
Puntos: 8
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????
__________________
Braulio Soncco
braulio at buayacorp dot com
Buayacorp - Programación y Diseño
  #6 (permalink)  
Antiguo 02/07/2005, 12:10
Avatar de iconogt  
Fecha de Ingreso: septiembre-2004
Ubicación: Guatemala
Mensajes: 573
Antigüedad: 13 años, 3 meses
Puntos: 4
Sonrisa Hola braulito,

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...
__________________
_______
Jorge Rojas.
  #7 (permalink)  
Antiguo 04/07/2005, 00:23
Avatar de quinqui  
Fecha de Ingreso: agosto-2004
Ubicación: Chile!
Mensajes: 776
Antigüedad: 13 años, 4 meses
Puntos: 56
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...
__________________
pipus.... vieeeeeji plomius!!!
*quinqui site*
  #8 (permalink)  
Antiguo 04/07/2005, 07:35
 
Fecha de Ingreso: junio-2005
Mensajes: 8
Antigüedad: 12 años, 5 meses
Puntos: 0
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;
  #9 (permalink)  
Antiguo 04/07/2005, 13:38
Avatar de braulito  
Fecha de Ingreso: abril-2004
Ubicación: Cusco - Perú
Mensajes: 597
Antigüedad: 13 años, 7 meses
Puntos: 8
y reduciendo ese código sería:
Código:
border: 1px solid #EAEAEA;
background-color: transparent;
__________________
Braulio Soncco
braulio at buayacorp dot com
Buayacorp - Programación y Diseño
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:01.