Quiero agregar relleno a las opciones de la etiqueta html "seleccionar".¿Cómo puedo agregar relleno a la lista desplegable html?
Intento agregarlo en la propiedad de estilo de "seleccionar" y "opción" y no funciona en IE.
¿Qué puedo hacer?
bien, me gusta sonar todas década de 1990, sino que simplemente pre y aplicación termina un espacio para el texto opción aceptable para los objetivos deseados?
+1 voto: Esta es la mejor solución, dado que OP quiere agregar algo de espacio a la izquierda y a la derecha, y si no quiere dedicar un par de horas a implementar el menú desplegable personalizado. –
Por favor, no hagas eso. Eso evita seleccionar opciones de una lista escribiendo. También rompe el autocompletado. Esta es una impedancia particular para los usuarios con requisitos de accesibilidad. –
** Otra solución que funciona en todos los navegadores **, es agregar ' ' a la primera opción en la lista de selección verificar [esto] (http://stackoverflow.com/questions/25752/how-do-i-put-a -space-character-before-option-text-in-a-html-select-element) y [this] (http://stackoverflow.com/questions/5828697/how-to-retain-spaces-in-dropdownlist- asp-net-mvc-razor-views), Hope ayuda. – stom
CSS:
option{
padding: 0.5em;
}
No funciona en IE. – Billy
El único navegador en el que esto funciona es Firefox. Safari, Chrome y Opera no lo notan. –
Es difícil de peinar un menú desplegable del navegador cuadro de cruz. Para obtener algún tipo de control, deberá codificar uno de reemplazo en JavaScript. Se advierte, sin embargo:
los siguientes obras, en FF3 + y Midori (y presumiblemente otros navegadores Webkit):
select
{width: 14em;
margin: 0 1em;
text-indent: 1em;
line-height: 2em;}
select * {width: 14em;
padding: 0 1em;
text-indent: 0;
line-height: 2em;}
la anchura es permitir en En el cuadro select que se muestra cuando no está activo, el margen hace lo que siempre hace, text-indent se utiliza para simular el relleno entre el límite izquierdo del cuadro de selección y el texto interno. line-height es solo para permitir el espaciado vertical.
No puedo comentar sobre su uso en IE, me temo, por lo que si alguien pudiera retroalimentar -o adaptarse- a su gusto, eso sería bueno.
Vale la pena señalar que la parte desplegable de la selección (select *) no se ve afectada fuera de FF3, por la razón que sea, así que si esa era la pregunta que quería responder, me disculpo por no ofrecer nada nuevo.
demo en: http://davidrhysthomas.co.uk/so/select-styling.html
No pude conseguir que esto funcione con relleno o espaciado por alguna razón. Fui con una solución de jQuery que tiene este aspecto:
$(document).click(function(){
$('#selector option').each(function(){
$(this).html(" "+$(this).text());
});
});
Crear una clase para el SELECT
.listBox{
width: 200px;
...etc
}
Ahora definir el CSS para las opciones del SELECT
.listBox option{
padding:4px;
...etc
}
Probado en IE 10
¿Qué estás tratando de hacer? ¿Por qué quieres rellenar las opciones de selección? –
Quiero agregar algo de espacio a los lados izquierdo y derecho de seleccionar opciones para que se vea mejor. – Billy