html - sangria - Eliminar sangría de texto de seleccionar(Windows)
sangria html css (5)
Necesito una solución de varios navegadores para eliminar la sangría de relleno / texto de los campos de selección nativos. Usando padding: 0 no parece eliminarlo por completo.
Aquí hay una captura de pantalla de Chrome, sin espacio de texto en el lado izquierdo:
Y aquí hay una captura de pantalla de Firefox, que tiene algo de espacio de texto en el lado izquierdo:
Sin embargo, también debería eliminar el relleno en, por ejemplo, Edge / IE11 / Safari, etc. Por lo tanto, no debería ser una solución solo de Firefox, sino una solución de navegador cruzado.
Aquí está el código:
select {
font-size: 18px;
height: 38px;
line-height: 38px;
padding: 0;
width: 100%;
background-color: red;
color: #000000;
display: block;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
border-color: #000000;
border-width: 0 0 1px 0;
border-style: solid;
}
option {
padding: 0;
}
<select>
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
</select>
Fiddle : https://jsfiddle.net/cbkopypv/1/
Este espacio en blanco adicional en firefox 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.
Esto podría ayudar:
artículo de Mozilla explicando algunas formas de mitigar la incosistencia selectiva del cuadro
Smashing Magazine (Se trata de diseñar elementos de formulario)
Esto es algo así como una solución y requiere condicionales basados en el navegador. Me parece poco probable que haya una verdadera solución entre navegadores disponible.
Coloque la selección dentro de un elemento contenedor. Dale a ese contenedor un overflow hidden y desplaza el select algunos píxeles hacia la izquierda. Esto requeriría que pueda ejecutar CSS ligeramente diferente para IE / Edge (ambos funcionan igual), Firefox y Chrome (que funciona con su código original).
Los siguientes trabajos para IE11 y Edge:
select {
font-size: 18px;
height: 38px;
line-height: 38px;
padding: 0;
width: 100%;
background-color: red;
color: #000000;
display: block;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
border-color: #000000;
border-width: 0 0 1px 0;
border-style: solid;
margin-left: -2px;
}
option {
padding: 0;
}
.container {
overflow: hidden;
}
<div class="container">
<select>
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
</select>
</div>
Para Firefox, use margin-left: -4px
Esta no es la solución más limpia, pero funciona:
Además de restablecer el relleno en 0, puede usar la propiedad de text-indent y establecer diferentes valores para diferentes navegadores.
Parece que Safari y Chrome son buenos, pero Firefox y Edge están apagados por 2px, por lo que puedes cambiarlos a la izquierda por 2px en FF e IE solo así:
// firefox
@-moz-document url-prefix() {
select {
text-indent: -2px
}
}
// Edge
@supports (-ms-ime-align: auto) {
select {
text-indent: -2px
}
}
Esos cubren el navegador principal, eche un vistazo a browserhacks.com si cree que tendrá que apuntar a otros navegadores, dispositivos, etc.
Espero que ayude.
según browserhacks.com parece otra forma de segmentación IE / Edge ≥ 10 es _:-ms-input-placeholder, :root .selector
para que pudieras agregar:
_:-ms-input-placeholder, :root select {
text-indent:-2px
}
Eso parece estar funcionando para mí, espero que funcione ahora para ti también.
Esto y un montón de otras inconsistencias del navegador pueden resolverse utilizando un archivo ''css reset''. Uno de los más populares, y el que uso en todos mis proyectos es ''normalize.css'': https://necolas.github.io/normalize.css/
Esta pequeña cantidad de css adicionales garantiza que todos los navegadores presenten el mismo contenido (al menos, como se puede lograr).
Lo que hará para resolver el problema en su caso específico es usar las reglas de etiqueta <select> normalize para asegurarse de que el relleno, el alto de línea, la sangría (etc.) se configure para que aparezca de manera consistente en todos los navegadores. Luego, cuando lo sobrerregle con sus propios estilos CSS, en este caso: padding:0; margin:0; padding:0; margin:0; aparecerá de esa manera en todos los navegadores dirigidos.
Espero que esto ayude. Normalize.css es una de esas herramientas que hubiera deseado haber descubierto antes cuando me enteré de ello. También resolverá los problemas de diseño que aún no haya encontrado, antes de tenerlos.
Esta es una combinación de algunas respuestas, comentarios y mi propio truco IE11. Lo probé en IE11, Edge, Chrome, Firefox (Windows) y Safari 10 (macOS) y funciona:
.select-container {
overflow: hidden;
}
select {
font-size: 18px;
height: 38px;
line-height: 38px;
padding: 0;
width: 100%;
background-color: red;
color: #000000;
display: block;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
border-color: #000000;
border-width: 0 0 1px 0;
border-style: solid;
}
option {
padding: 0;
}
/* Firefox: */
@-moz-document url-prefix() {
select {
text-indent: -2px;
}
}
/* Edge: */
@supports (-ms-ime-align: auto) {
select {
width: calc(100% + 4px);
margin-left: -4px;
}
}
/* IE11: */
@media screen and (-ms-high-contrast: active),
screen and (-ms-high-contrast: none) {
select {
width: calc(100% + 4px);
margin-left: -3px;
}
}
<div class="select-container">
<select>
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
</select>
</div>
Fiddle: https://jsfiddle.net/cbkopypv/13/
No podemos usar el hack de margin de Edge & IE11 para Firefox también, ya que también causaría el margen negativo en el menú desplegable. Y no podemos usar el hack text-indent de Firefox en IE11 y Edge, ya que no funcionará.
¡Gracias a todos por ayudar!