Foros del Web » Creando para Internet » CSS »

Estilo a un input de tipo text

Estas en el tema de Estilo a un input de tipo text en el foro de CSS en Foros del Web. Buenos dias, Estoy creando un css en el cual quiero poner que todos los input de tipo text les ponga un estilo, pero no hay ...
  #1 (permalink)  
Antiguo 10/11/2006, 07:06
Bil
 
Fecha de Ingreso: noviembre-2006
Mensajes: 34
Antigüedad: 11 años, 1 mes
Puntos: 0
Estilo a un input de tipo text

Buenos dias,
Estoy creando un css en el cual quiero poner que todos los input de tipo text les ponga un estilo, pero no hay manera de conseguirlo. Por ejemplo estado probando con eso pero tampoco hace caso:
.input text
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 20px
}

Claro lo que no quiero es que en cada input poner el class, porque eso funciona pero no es lo que busco, busco configurarlo como se puede hacer tanto con el body o con el form.

Gracias, un saludo.
  #2 (permalink)  
Antiguo 10/11/2006, 09:22
AlvaroG
Invitado
 
Mensajes: n/a
Puntos:
lo que estás buscando se hace con

input[type="text"]

que es "todos los input cuyo atributo type sea igual a 'text'". Vale decir que vale para cualquier combinación

ETIQUETA[ATRIBUTO="VALOR"]

http://www.sidar.org/recur/desdi/tra.../selector.html


Saludos.
  #3 (permalink)  
Antiguo 12/11/2006, 05:51
Avatar de BonRouge  
Fecha de Ingreso: noviembre-2006
Mensajes: 51
Antigüedad: 11 años, 1 mes
Puntos: 0
Cita:
Iniciado por alvlin Ver Mensaje
lo que estás buscando se hace con

input[type="text"]

que es "todos los input cuyo atributo type sea igual a 'text'". Vale decir que vale para cualquier combinación

ETIQUETA[ATRIBUTO="VALOR"]
Aunque eso es verdad, no funciona en IE6. Creo que tienes que poner un class.
  #4 (permalink)  
Antiguo 12/11/2006, 08:20
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
Hola:

También existen los tags buttons para los botones... incluso creo que es la mejor forma semántica de usar elementos en formularios...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #5 (permalink)  
Antiguo 14/11/2006, 07:14
Bil
 
Fecha de Ingreso: noviembre-2006
Mensajes: 34
Antigüedad: 11 años, 1 mes
Puntos: 0
Buenos dias

gracias,

tag buttons?, pero es un input text, el estilo tambien se lo quiero aplicar tanto a los input text, como a los checkbox o radiobuttons.
En el Iexplorer 6 no funciona y supongo q en el 7 tampoco.
El problema es que ir por todos los input poniendo el class es una liada.

Muchas Gracias.

Última edición por Bil; 14/11/2006 a las 07:45
  #6 (permalink)  
Antiguo 14/11/2006, 09:18
AlvaroG
Invitado
 
Mensajes: n/a
Puntos:
bueno, no es lo ideal, pero podés usar un javascript:
(lo pongo en partes, para no quedar pegado si me equivoco en la sintaxis )

var inputs = document.getElementsByTagName("input");

for...... (recorrer la matriz inputs)
if (inputs[i].type == 'text') {
inputs[i].class = 'elnombredelaclase';
}

Luego usás diferentes clases según el tipo o simplemente sacás el if i le aplicás la misma clase a todos.

No es lo ideal, desde muchos puntos de vista, pero al menos no vas a tener que arreglar todos los input (es más, podrías tal vez hacerlo de tal forma que se ejecute únicamente si el navegador es el ie, dejando el input[type="text"] para el resto... pero este no es el foro de javascript )


Saludos.
  #7 (permalink)  
Antiguo 14/11/2006, 09:34
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
Cita:
Iniciado por alvlin Ver Mensaje
lo que estás buscando se hace con

input[type="text"]

que es "todos los input cuyo atributo type sea igual a 'text'". Vale decir que vale para cualquier combinación

ETIQUETA[ATRIBUTO="VALOR"]

http://www.sidar.org/recur/desdi/tra.../selector.html


Saludos.
Este selector no trabaja con Internet Explorer 6 y anterior. Por o que se usa poco o casi nada, por que para nuestra desgracia, IE es el navegador mas usado.

Cita:
Iniciado por Bil Ver Mensaje

pero es un input text, el estilo tambien se lo quiero aplicar tanto a los input text, como a los checkbox o radiobuttons.
El problema es que ir por todos los input poniendo el class es una liada.
Solo tienes que poner como selector el input, y le pones el estilo que quiera si lo quieres aplicar a todos los input, incluyendo checkboxes, radiobuttons y textfields, incluso tomaria los submits, buttons, y reset. Si quieres que alguno de estos elementos no lo tengan pues le pones un class a ese solo y ya, pero no tienes que ponerle un class a cada uno.

input {
color: #fff
}
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #8 (permalink)  
Antiguo 14/11/2006, 10:03
Avatar de BonRouge  
Fecha de Ingreso: noviembre-2006
Mensajes: 51
Antigüedad: 11 años, 1 mes
Puntos: 0
Cita:
Iniciado por alvlin Ver Mensaje
inputs[i].class = 'elnombredelaclase';
Eso sería un poquito mejor:
Código:
 inputs[i].className += ' elnombredelaclase';
  #9 (permalink)  
Antiguo 14/11/2006, 10:49
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
No creo que haya necesidad de usar javascript para conseguir esto, pero bueno, eso es a gusto del consumidor.
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #10 (permalink)  
Antiguo 14/11/2006, 10:59
Avatar de BonRouge  
Fecha de Ingreso: noviembre-2006
Mensajes: 51
Antigüedad: 11 años, 1 mes
Puntos: 0
Lo mejor sería usar un class pero Bil dice que no lo quiere.
  #11 (permalink)  
Antiguo 14/11/2006, 11:38
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
Cita:
Iniciado por BonRouge Ver Mensaje
Lo mejor sería usar un class pero Bil dice que no lo quiere.
Creo que la forma mas semantica fue la que le di, es la mas sencilla, y creo que aplica para lo que el quiere, el class seria si el desea que alguno de esos inputs fuera distinto del resto.

Pienso que si alguien postea una pregunta en el foro de CSS, y CSS tiene una solucion para eso, no creo que sea prudente darle una respuesta de otro lenguaje como Javascript y Php a menos que no se puede lograr con CSS. Vaya no pretendo equivocarme ni molestar a nadie, pero esto es CSS.
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #12 (permalink)  
Antiguo 14/11/2006, 18:19
AlvaroG
Invitado
 
Mensajes: n/a
Puntos:
Perfecto, es css, clarísimo.,
Pero si la solución css "no sirve" para lo que pregunta, sea porque el pseudonavegador que todo el mundo usa no funciona, o porque él no quiere ir cambiando las clases, creo que pensar un poco en otras formas no le hace daño a nadie.


Saludos.
  #13 (permalink)  
Antiguo 14/11/2006, 22:51
Avatar de sjam7  
Fecha de Ingreso: diciembre-2001
Ubicación: Guadalajara, Mexico
Mensajes: 3.669
Antigüedad: 16 años
Puntos: 16
y no te estas complicando mas la existencia que si solo pusieras un class a cada input?

una opcion que se me ocurre es algo asi:

.formulario input {font-family:verdana}

<form class="formulario">
<input type="text">
</form>

Puedes poner ademas cosas como .formulario input,textarea {font-size:20px}

Última edición por sjam7; 14/11/2006 a las 23:00 Razón: Agregue algo :-D
  #14 (permalink)  
Antiguo 15/11/2006, 03:23
Bil
 
Fecha de Ingreso: noviembre-2006
Mensajes: 34
Antigüedad: 11 años, 1 mes
Puntos: 0
Gracias

Buenos dias,
gracias a todos, pero como bien decis al final voy a tener que darle un class general a los input y luego ir dandole un class especial para cada input, porque mi idea al principio era poder generalizar dando un estilo a todos los input de tipo text y luego dar un otro estilo diferente a todos los input de tipo boton, pero visto que no existe una manera de hacerlo a no ser que sea con javascript habra que hacerlo con el class en los input. Aunque lo del javascript no sea mala idea.

Esto no deja que si alguien se le ocurre como poder hacerlo con css no deje de darnos una solucion a todos, para no quedarnos con la intriga.

Muchas Gracias
Un saludo.
  #15 (permalink)  
Antiguo 15/11/2006, 08:36
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
Muchacho que no te hace falta ponerle un class a TODOS los input, mira

El CSS
Cita:
input, textarea {
font-family:verdana;
color: #963;
border: solid 1px #960;
}

.but{

font-family:Arial;
color: #930;
border: solid 1px #fff;
}
El XHTML
Cita:
<form action="#" name="form1">

/*Inputs de tipo text*/
<input type="text" name="txt1" />
<input type="text" name="txt2" />
<textarea name="txtarea1"></textarea>

/*Botones*/
<input type="submit" name="butsub" class="but" />
<input type="reset" name="butres" class="but" />

</form>
Lo que me refiero es que te estas ahorrando los class del input el tipo text, si solo quiero customizar los botones para que sean diferente del resto de los inputs.

Tienes que poner un class para CADA boton, pero al menos te evitas el Javascript. Por supuesto si lo que buscas es solo CSS.
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #16 (permalink)  
Antiguo 15/11/2006, 09:40
 
Fecha de Ingreso: abril-2005
Ubicación: Lima-Peru
Mensajes: 313
Antigüedad: 12 años, 7 meses
Puntos: 1
Si, lo mejor es poniendo una clase para cada input, de alli se le formatea en el css, estuve probando quitandole bordes e igualando el color de fondo, para ponerle un background con sombritas a un input, y queda muy bien, pero al poner más informacion que el tamaño del input, las letras se desfasan del contenido
  #17 (permalink)  
Antiguo 15/11/2006, 13:46
Avatar de sjam7  
Fecha de Ingreso: diciembre-2001
Ubicación: Guadalajara, Mexico
Mensajes: 3.669
Antigüedad: 16 años
Puntos: 16
una pregunta, no te sirvio lo que te puse? asi solo aplicas un class al formulario
  #18 (permalink)  
Antiguo 15/11/2006, 14:58
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
Cita:
Iniciado por sjam7 Ver Mensaje
una pregunta, no te sirvio lo que te puse? asi solo aplicas un class al formulario
Estamos en las mismas, esa es la manera mas facil de hacerlo, usando solo css. Veamos como le va
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 19:57.