Todos los campos de texto tienen soporte completo para cada propiedad relacionada con el modelo de caja CSS, como width, height, padding , margin y border. Sin embargo, como antes, los navegadores se basan en los estilos predeterminados del sistema cuando muestran estos controles. Depende de usted definir cómo desea combinarlos en su contenido. Si desea mantener la apariencia nativa de los controles, enfrentará algunas dificultades si desea darles un tamaño uniforme.
Esto se debe a que cada control tiene sus propias reglas para el borde, el relleno (_padding_) y el margen. Para dar el mismo tamaño a varios controles diferentes, puede usar la propiedad box-sizing junto con algunos valores consistentes para otras propiedades:
.png "carbon(444).png")
En la captura de pantalla a continuación, la columna de la izquierda muestra la representación predeterminada de los controles de entrada <input type="radio">, <input type="checkbox">, <input type="range">, <input type="text">, <input type="date">, <select>, <textarea>, <input type="submit">, y <button>. La columna de la derecha, por otro lado, muestra los mismos elementos con nuestra regla anterior aplicada a ellos. Observe cómo esto nos permite asegurarnos de que todos los elementos ocupen la misma cantidad de espacio, a pesar de las reglas predeterminadas de la plataforma para cada tipo de control.
Lo que puede no ser evidente a través de la captura de pantalla es que los controles de radio y casilla de verificación aún se ven iguales, pero están centrados en el espacio horizontal de 150px provisto por la propiedad width. Es posible que otros navegadores no centren los controles, pero se adhieren al espacio asignado.