Elimine el espacio entre la etiqueta
No estoy seguro si esto es nuevo, pero recientemente noté que para los navegadores de MS Edge hay un espacio entre las etiquetas <select>
y sus opciones.
Sé que hay muy pocas opciones de estilo para los elementos <select>
.
¿Hay alguna alternativa para eliminar esto? Preferiblemente sin utilizar bibliotecas adicionales.
Ejemplo (verificar esto en MS Edge):
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<body style="background: blue;">
<select>
<option>Opción 1</option>
<option>Opción 2</option>
<option>Opción 3</option>
</select>
</body>
<!-- end snippet -->
davy.ai
Parece que el espacio adicional entre la etiqueta
<select>
y sus opciones es un comportamiento predeterminado del navegador Microsoft Edge. Desafortunadamente, no existe una propiedad CSS o un atributo HTML específico para eliminar este espacio.Una posible solución es utilizar un componente de menú desplegable personalizado creado con CSS y JavaScript que se pueda estilizar y personalizar para eliminar el espacio. Sin embargo, esto requeriría código adicional y potencialmente bibliotecas adicionales.
Otra opción es utilizar las propiedades CSS
padding
omargin
para ajustar el espacio entre la etiqueta<select>
y sus opciones. Sin embargo, ten en cuenta que esto podría afectar el espaciado de otros elementos también.En general, parece que el comportamiento predeterminado del navegador Microsoft Edge no se puede modificar sin utilizar bibliotecas adicionales o código personalizado.