[SOLUCIONADO] Mismos estilos a input, textarea y select!

[berkeleyPunk]

Hola a todo mundo!

Hace tiempo que no venía, y me da mucho gusto estar aquí .

Bueno, al grano. Últimamente estoy maquetando mucho y siempre me topo con el mismo problema al intentar aplicar los mismos estilos a los controles de un formulario.

Digamos que tengo un input, un select y un textarea, y a los tres les asigno los mismos estilos:

Código CSS:

input,
select,
textarea {
    display: block;
    width: 100%;
    height: 20px;
    padding: 10px;
    border: 1px solid #ccc;
}
 

El resultado es esta cosa horrible.

Por un lado el select no reconoce el padding, y por otro, el input y textarea tienen un ancho mayor a su contenedor.

¿Cómo lidian ustedes, señores, con esto?

Uno puede utilizar un width: 200px; y con eso se soluciona la cosa del ancho. ¿Pero si queremos porcentajes?



Saludos!

[madman_18]

Iniciado por berkeleyPunk

Hola a todo mundo!

Hace tiempo que no venía, y me da mucho gusto estar aquí .

Bueno, al grano. Últimamente estoy maquetando mucho y siempre me topo con el mismo problema al intentar aplicar los mismos estilos a los controles de un formulario.

Digamos que tengo un input, un select y un textarea, y a los tres les asigno los mismos estilos:

Código CSS:

input,
select,
textarea {
    display: block;
    width: 100%;
    height: 20px;
    padding: 10px;
    border: 1px solid #ccc;
}
 

El resultado es esta cosa horrible.

Por un lado el select no reconoce el padding, y por otro, el input y textarea tienen un ancho mayor a su contenedor.

¿Cómo lidian ustedes, señores, con esto?

Uno puede utilizar un width: 200px; y con eso se soluciona la cosa del ancho. ¿Pero si queremos porcentajes?



Saludos!

Hola!

Creo que el problema te viene por ponerle

Código CSS:

width:100%;
padding:10px;
 

De ahí está ocupandote el 100% y luego le estas "añadiendo" 10px por la izquierda y 10px por la derecha...

A mí me resulta muy útil en esos casos jugar con los porcentajes, normalmente suelo poner algo tal que así:

Código CSS:

width:96%;
padding:2%; /*haria el 100% del input al sumar el 2% en la izq + el 2% en la derecha [2+96+2=100%]*/
 

Ya nos dices si te funciona

[pzin]

El tema del relleno, lo arreglas cambiando el modelo de caja.

Y lo del select, siempre son especialitos. Lo más fácil es quitarle la apariencia.

Déjalo tal que así:

Código CSS:

box-sizing: border-box;
appearance: none;
 

Y luego quitar la altura (yo creo que es mejor usar rellenos y tamaño de la fuente) y ya solamente añadir un color de fondo.

Quedaría así: https://jsfiddle.net/e9fgrrsd/1

Para recuperar la flecha del select puedes hacerlo con un pseudo elemento solo en el select.

[berkeleyPunk]

Gracias por responder, madman_18 y maestro pzin.

madman_18, lo que dices del width:96% y el padding:2%, es buena idea, funcionó bien.

pzin, tu CSS es casi excelente, ya está, casi! Tengo un par de preguntas sobre tu comentario. Ojalá puedas responderlas.

1)

Iniciado por pzin

...luego quitar la altura (yo creo que es mejor usar rellenos y tamaño de la fuente)

¿A qué te refieres con usar rellenos y tamaño de la fuente? ¿Por rellenos te refieres a backgrounds, a paddings? ¿Para qué asignar tamaño de fuente?

2)

Iniciado por pzin

...Para recuperar la flecha del select puedes hacerlo con un pseudo elemento solo en el select.

Veo que el appearance quitá la flecha. Intenté recuperarla con un :before y :after, pero no funciona. En esta página dicen cómo recuperarla, pero la cosa es que ahí suponen que uno hace formularios a mano, creando el HTML custom, y por ello puede uno poner y quitar divs por aquí y por allá. ¿Pero qué tal que, por la razón que sea, uno no puede añadir ni quitar elementos del formulario?

3)
Por último, ¿cómo lograr que todos los elementos tengan la misma altura? Excepto el textarea, que siempre es más alto.
Se me ocurrió ponerle un min-height y max-height, lo cual funciona bien, salvo que a una pequeña altura, el select se ve medio recortado. Le quité el padding al select y no queda mal. ¿Te parece buena solución? Miren cómo queda.

[pzin]

Con relleno me refiero a padding. Eso y el tamaño de a fuente ya te darán una altura.

En un select no puedes usar pseudo elementos, porque, igual que el resto de elementos de formularios no tienen contenidos. Por eso habitualmente se mete dentro de algún otro elemento para luego poner la flecha.

Si no puedes cambiar el formulario, solo se me ocurre que mediante JavaScript modifiques el DOM para añadir los elementos que necesites.

[berkeleyPunk]

Iniciado por pzin

...Si no puedes cambiar el formulario, solo se me ocurre que mediante JavaScript modifiques el DOM para añadir los elementos que necesites.

Entendido. Lo de modificar el DOM mediante jQuery o JS generalmente nunca lo hago, no me gusta hacerlo, salvo en casos de vida o muerte.

De cualquier forma, lo que me han dicho en este post ya ha valido la pena y creo que es suficiente para, en el futuro, lidiar de mejor forma con la maquetación de formularios.


Saludos!