Pregunta Relleno de texto en cuadros seleccionados


Acabo de encontrar un problema oscuro con select cajas que tienen espacio adicional alrededor del texto que no parece ser parte del modelo de caja. Aquí hay dos fotos de lo que quiero decir:

Select Box Padding Test

Select Box Padding Test 2

Aquí hay un ejemplo de lo que está sucediendo (en JSFiddle) o puede ver la fuente en mi ejemplo a continuación:

select, input
{
	padding:0px;
	font-size:20px;
}
select.textIndent
{
	text-indent:-1.5px;
}
select.paddingOffset
{
	padding-left:2.5px;
}
input.paddingOffset
{
	padding-left:5px;
}
<h3>No Padding Test</h3>
<select>
	<option>Item 1</option>
	<option>Item 2</option>
	<option>Item 3</option>
</select><br />
<input type="text" value="Item 1" />
<h3>Negative Text Indent</h3>
<select class="textIndent">
	<option>Item 1</option>
	<option>Item 2</option>
	<option>Item 3</option>
</select><br />
<input type="text" value="Item 1" />
<h3>Padding Offset</h3>
<select class="paddingOffset">
	<option>Item 1</option>
	<option>Item 2</option>
	<option>Item 3</option>
</select><br />
<input class="paddingOffset" type="text" value="Item 1" />

Ya he resuelto dos métodos para tratar de evitarlo, ya sea teniendo un resultado negativo text-indent o usando el relleno izquierdo para ajustar el input y select cajas para hacer coincidir.

Ambos métodos no son perfectos. Hay una diferencia entre lo negativo text-indent para Chrome y Firefox resultando en un espacio notable si el select y input están alineados uno después del otro. Tratar de compensar el relleno puede hacer que el mantenimiento del estilo de varios input y select campos algo difíciles donde está aplicando un porcentaje de relleno.

Lo noté por primera vez en el sitio web de un cliente donde se cortaba parte de la palabra, sin embargo, si ese espacio vacío no estaba allí, la palabra parece encajar.

Client example of the issue

Si bien puedo solucionar este problema en particular para mi cliente (por ejemplo, más select box, less padding), quiero saber si hay una solución diferente para ocultar / compensar / eliminar el "otro" relleno a la izquierda / derecha del texto. ¿Hay alguna otra propiedad CSS que debería estar mirando?

Tengo la sensación de que esto podría ser solo cómo select Las cajas funcionan pero me gustaría que la colmena colectiva de SO me demuestre que estoy equivocado.

Editar 1

Espero que la solución sea pura CSS. Sé que si uso un reemplazo directo para un select utilizando una biblioteca JS, no tendría el mismo problema.

Editar 2

Solo para aclarar mejor lo que busco, el select la caja tiene un relleno adicional fuera del modelo de caja. Las imágenes a continuación muestran 6px para el select caja y ~ 3px para el input. Me gustaría controlar este relleno en particular o eliminarlo por completo. Ya lo he intentado con text-indent y utilizando un desplazamiento de relleno para alinear el texto en el input y select elementos, pero ambos parecen hackish. Creo que hay una mejor forma de CSS para hacer esto.

Example Clarified 1

Example Clarified 2


32
2017-11-18 23:44


origen


Respuestas:


Desafortunadamente, este espacio en blanco adicional es agregado por el motor de renderizado del navegador. La representación del elemento de formulario no es uniforme en todos los navegadores, y en este caso no está determinada por CSS.

Echa un vistazo a este artículo de Mozilla explicando algunas formas de mitigar la incosistencia selectiva de la caja, entonces puede leer Este artículo de Smashing Magazine sobre el estilo de los elementos del formulario (asegúrese de revisar los comentarios y los problemas que las personas han tenido con los seleccionados).


21
2017-11-19 00:18



El relleno que está viendo proviene de la hoja de estilo específica del navegador. En Chrome, el atributo que es responsable del diseño de estos menús desplegables es -webkit-appearance, en Firefox es -moz-appearance 

Puede estandarizar el aspecto de sus menús seleccionados haciendo lo siguiente:

select {
    -webkit-appearance: none;
    -moz-appearance : none;
    border:1px solid #ccc;
    border-radius:3px;
    padding:5px 3px;
}

Nota: esto no producirá buenos resultados, solo le dará relleno / espaciado estándar en su cuadro de selección. Para lograr cuadros de selección atractivos y personalizables que puedan controlar completamente el relleno / tamaño, etc., hay muchísimos tutoriales disponibles. Aquí hay uno que encontré después de una búsqueda rápida en Google:

http://www.htmllion.com/default-select-dropdown-style-just-css.html


11
2017-11-19 00:06



Lo que resolvió esto para mí fue anular el atributo de "tamaño de caja" de Chrome en cuadros de selección. Tiene "border-box" - y lo anulé y usé "content-box"


-3
2018-05-17 21:34



Para editar el cuadro de selección, debe usar jQuery (o javascript en general).

De todos modos, puedes resolver el problema usando este "truco":

http://jsfiddle.net/Clear/hwzd88o5/6/

Mirar:

select.textIndent
{
    height: 80px;
    line-height: 80px;
    width: 300px;
    padding-left: 50px !important;
}

;)


-4
2017-11-19 00:02



Prueba esto. Funcionó para mí

 <div id="div">
       <select size=1>
          <option value="0">Option 1</option>
          <option value="1">Option 2</option>
       </select>
  </div>

CSS

 #div option {padding-left: 5px;}

-4
2017-08-06 03:00