¿Alinear texto y seleccionar cuadros con el mismo ancho en CSS?

81

Ok, esto es aparentemente imposible de hacer bien. Tengo un cuadro de texto y un cuadro de selección. Quiero que tengan exactamente el mismo ancho para que se alineen en el margen izquierdo y el margen derecho.

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            input, select {
                width: 200px;
            }
        </style>
    </head>
    <body>
        <input type="text" value="ABC"><br>
        <select>
            <option>123</option>
        </select>
    </body>
</html>

Eso es lo que piensas, ¿verdad? No El cuadro de selección es 6px más corto en Firefox. Ver captura de pantalla.captura de pantalla en firefox

Ok, editemos el código y creemos dos estilos.

<style type="text/css">
    input {
        width: 200px;
    }
    select {
        width: 206px;
    }
</style>

Ok eso funciona!

Corregido en Firefox

Oh, espera, mejor prueba en Chrome ...

captura de pantalla de Chrome

FFFFFFFUUUUUUUUUUUUUU

¿Alguien puede decirme cómo alinearlos en todos los navegadores? ¿Por qué no puedo simplemente hacer ancho: 200 px en total, por qué todos los navegadores lo muestran de manera diferente? Además, mientras estamos en eso, ¿por qué el cuadro de texto y el cuadro de selección tienen diferentes alturas? ¿Cómo los conseguimos a la misma altura? He probado la altura y la altura de la línea en vano.

Solución:

Ok, encontré la solución con la ayuda de las respuestas a continuación. La clave es usar la propiedad box-sizing: border-box para cuando especifique el ancho que incluye el borde y el relleno. Vea una excelente explicación aquí . Entonces el navegador no puede rellenarlo.

El código está debajo, también establecí la altura de los cuadros al mismo tamaño y sangré el texto dentro del cuadro para que se alinee. También debe establecer el borde, ya que Chrome tiene un borde de aspecto realmente extraño que usa para seleccionar cuadros que eliminarán la alineación. Esto funcionará para sitios HTML5 (por ejemplo, compatibles con IE9, Firefox, Chrome, Safari, Opera, etc.).

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            input, select {
                width: 200px;
                border: 1px solid #000;
                padding: 0;
                margin: 0;
                height: 22px;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
            }
            input {
                text-indent: 4px;
            }
        </style>
    </head>
    <body>
        <input type="text" value="ABC"><br>
        <select>
            <option>123</option>
            <option>123456789 123123123123</option>
            <option>123456789 123123123123 134213721381212</option>
        </select>
    </body>
</html>

Solo una advertencia final: es posible que no desee que se incluyan botones de entrada, casillas de verificación, etc.en este estilo, así que use input:not([type='button'])para no aplicarlo a ciertos tipos o input[type='text'], input[type='password']para especificar aquellos a los que sí desea que se aplique.

css  html  textbox  drop-down-menu 
— zuallauz
fuente
3
Si tiene que tener este nivel de precisión, no será feliz como diseñador web.
— Scott Saunders
2
Sí, CSS me vuelve loco a diario @Scott. :)
— zuallauz
2
Tenga en cuenta que el tamaño de caja no es compatible con lte IE7 (aproximadamente el 3% de los usuarios). Y nunca use: no, no es compatible con lte IE8, que es el 20% de los usuarios :)
— Anónimo
Box-dimensionamiento hace el trabajo en IE8! Todos estos años he estado agregando anchos específicos al estilo <select> ...
— GlennG
el tamaño de la caja funciona
— Pierre

Respuestas:

7

Esto se debe a que el <input type="text" />elemento tiene un estilo predeterminado ligeramente diferente al del <select>elemento, por ejemplo, los valores de borde, relleno y margen pueden ser diferentes.

Puede observar estos estilos predeterminados a través de un inspector de elementos como Firebug para Firefox o el integrado para Chrome. Además, estas hojas de estilo predeterminadas difieren de un navegador a otro.

Tienes dos opciones:

  1. Establezca explícitamente que los valores de borde, relleno y margen sean los mismos para ambos elementos
  2. Una hoja de estilo de restablecimiento de CSS que se incluirá antes de sus propias hojas de estilo CSS

Yo optaría por la opción 1. porque la opción 2. requiere mucho trabajo y terminará con toneladas de CSS innecesario. Pero algunos desarrolladores web prefieren empezar desde cero y tener el control total.

— Chris Cannon
fuente
2
El restablecimiento de CSS no es una mala idea en un caso como este.
— Remy
1
Existen restablecimientos de CSS ligeros, pero, por supuesto, puede haber efectos secundarios no deseados. Si comienza a diseñar con una hoja de estilo de restablecimiento de CSS, esa opción se vuelve mucho más atractiva.
— Thomas Upton
He intentado configurar explícitamente lo padding:0; margin:0; border:1px solid #000;que hace que el ancho del texto / cuadros de selección se alinee bien. Sin embargo, si observa el texto dentro de los dos cuadros, notará que el texto en el cuadro de selección se rellena más. Casi es necesario agregar otro input { padding-left: 5px; }estilo específico después del primero en corregir. ¿Algunas ideas? Usé un restablecimiento de CSS en el sitio que estaba construyendo antes de hacer este código de prueba básico, pero el problema aún estaba presente allí. El restablecimiento de CSS aparentemente no solucionó este problema específico de ancho de cuadro de texto / selección.
— zuallauz
1
Prueba input {text-indent: 5px;}PS, la <select>etiqueta es muy rígida y específica del sistema operativo; ignorará una gran cantidad de CSS.
— Chris Cannon
Sí, la sangría de texto funciona si agrega ese estilo adicional ... pero solo para un navegador. Luego, tiene una sangría diferente en Chrome, por lo que se reduce en 2-3 píxeles más. ¿Quizás necesite restablecer las sangrías para la selección y el texto de alguna manera?
— zuallauz
3

Esto lo acercará, pero ese nivel de precisión es casi imposible.

<div style="width: 200px"><input type="text" style="width: 100%; margin: 0; padding: 0" /></div>
<div style="width: 200px">
    <select id="Select1" style="width: 100%; margin: 0; padding: 0">
        <option>1</option>
    </select>
</div>
— saludar
fuente
3

Los diferentes navegadores aplican diferentes estilos de forma predeterminada. Descubrí que restablecer tanto el margen como el relleno a 0 hace que ambos elementos tengan el mismo ancho en Firefox y Chrome.

<html>
    <head>
        <title>Test</title>
        <style type="text/css">
            input, select {
                margin: 0;
                padding: 0;
                width: 200px;
            }
        </style>
    </head>
    <body>
        <input type="text" value="ABC"><br />
        <select>
            <option>123</option>
        </select>
    </body>
</html>

Personalmente, me gusta usar una hoja de estilo de restablecimiento de CSS mínimo como YUI CSS Reset antes de intentar que un diseño se vea bien en varios navegadores.

— Thomas Upton
fuente
2
Sin embargo, en IE, la selección sigue siendo un par de píxeles más corta. Entonces, aunque no hay una solución perfecta, podemos acercarnos bastante =)
— saludo
1
Ah, IE. Casi parece que disfruta de ser único. No tengo ninguna versión de IE para probar, pero ¿es diferente incluso en versiones posteriores, como la 9 o la 10?
— Thomas Upton
1
Probé con IE9 y todavía tenía una diferencia de ancho de 2px.
— saludo
Si observa el texto dentro de los dos cuadros, notará que el texto en el cuadro de selección se rellena más. Casi es necesario agregar un archivo input { padding-left: 5px; }. ¿Es esa la forma correcta de hacerlo? He utilizado un restablecimiento de CSS en el sitio que estaba construyendo antes de hacer este código de prueba básico, pero el problema seguía presente allí. El restablecimiento de CSS no solucionó este problema específico de ancho de cuadro de texto / selección.
— zuallauz
1
Dar relleno a la izquierda a la entrada es la forma en que intentaría alinear el texto en estos dos elementos, si ese fuera el requisito. No olvide que estos elementos se ven diferentes en diferentes sistemas operativos. No estoy seguro de que intentar alinear el texto de inputy los selectelementos sea algo que valga la pena, considerando todo. Conseguir que los bordes exteriores de estos elementos se alineen se ve bastante bien, estéticamente.
— Thomas Upton
2

Agregue una clase a las etiquetas de entrada y selección en cuestión, es decir:

<input class='custom-input'/>
<select class='custom-input'></select>

luego modifique el CSS a continuación para que se ajuste a su diseño:

.custom-input {
        width:140px;
        border:1px solid #ccc;
        margin:1px;
        padding:3px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -ms-box-sizing:content-box;
        -moz-box-sizing:content-box;
        -webkit-box-sizing:content-box;
        box-sizing:content-box;
    }

obvs, esta es una solución para los navegadores compatibles

— Matt Jameson
fuente
0

Si usa tablas de 4 entradas, podría usar la siguiente solución, también compatible con ie7:

<tr style="width:1px;"><td style="width:inherit;position:relative;">
    <select style="width:100%;"> 
    </select> 
</td></tr>
<tr><td>
    <input type="text" style="width:150px;"/>
</td></tr>

De esa manera, el ancho de la celda de la tabla se fijará al ancho de la entrada,

Y de esa manera, la selección siempre tomaría el ancho restante y se alinearía perfectamente con la entrada d.

— Anónimo
fuente
Eso es mucho HTML adicional. Este es un problema de CSS con una solución CSS.
— GlennG
0

Intente eliminar los bordes predeterminados de ambos elementos:

select, input {
 border:0;
}
— dama dotNET
fuente
0

Sí, extremadamente frustrante. Sin embargo, nunca tuve problemas con eso hasta que puse una etiqueta "<! DOCTYPE html>" en la parte superior de mi página HTML. Mi página web se procesó correctamente en todas las plataformas que pude probar hasta que coloqué esa etiqueta en la parte superior de mi documento.

Si bien es una "especificación genuina", parece ser la fuente de estos problemas de alineación. FWIW, estoy usando elementos HTML5, CSS en línea, etc., todo sin esa etiqueta para especificar HTML5. YMMV.

— Sid Lori
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.