html drop - ¿Cómo diseñar la opción de un html "seleccionar"?




7 Answers

En general, no puedes. Este elemento es renderizado por el SO, no HTML . No se puede diseñar a través de CSS . Hay complementos de reemplazo que se ven como <select> pero en realidad están compuestos de elementos HTML regulares que se pueden diseñar.

down menu

Aquí está mi html:

<select id="ddlProducts" name="ddProducts"> 
    <option>Product1 : Electronics </option>
    <option>Product2 : Sports </option>
</select>

Ahora, lo que quiero es poner el nombre del producto (es decir, 'Producto1', 'Producto2', etc.) en negrita, y sus categorías (por ejemplo, Electrónica, Deportes, etc.) en cursiva, usando sólo CSS. Encontré una pregunta similar sobre un año de antigüedad, pero como se menciona allí, simplemente no es posible usar HTML y CSS. Con suerte, hay una solución ahora. Cualquier sugerencia, peculiaridad o truco sería apreciado. Gracias.




Puede diseñar los elementos de la opción hasta cierto punto.

Usando la etiqueta * CSS puede diseñar las opciones dentro del cuadro que dibuja el sistema.

Ejemplo:

#ddlProducts *
{
 border-radius:15px;
 background-color:red;
}

Eso se verá así:




EDIT: encontré esta biblioteca impresionante que reemplaza el elemento "select" estándar en HTML con elementos de "seleccionar" de estilo impresionante : Select2 - https://select2.github.io/examples.html

En 2011 es posible que no haya podido diseñar el elemento de "opción", ¡pero es 2015! ¡Puedes totalmente estilizarlo! ¡No entiendo algunas de las respuestas de 2014 diciendo que no se puede diseñar! CSS3 funciona de maravilla. Intenté esto en mi propio código, y las "opciones" desplegables se diseñaron de la misma forma que se usaría para "seleccionar"

http://cssdeck.com/labs/styling-select-box-with-css3

¡Aquí hay un código de ejemplo!

select {
    padding:3px;
    margin: 0;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    background: black;
    color:#888;
    border:none;
    outline:none;
    display: inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;
}






Dejando aquí una alternativa rápida, usando la clase alternar sobre una mesa. El comportamiento es muy similar al de una selección, pero se puede diseñar con transición, filtros y colores, cada uno de manera individual.

function toggleSelect(){ 
 if (store.classList[0] === "hidden"){
    store.classList = "viewfull"
  }
  else {
    store.classList = "hidden"
  }
}
#store {
  overflow-y: scroll;
  max-height: 110px;
  max-width: 50%
 }
 
.hidden {
  display: none
 }
 
.viewfull {
  display: block
}

#store :nth-child(4) {
  background-color: lime;
}

span {font-size:2rem;cursor:pointer}
<span onclick="toggleSelect()">⮋</span>
 <div id="store" class="hidden">
 
<ul><li><a href="#keylogger">keylogger</a></li><li><a href="#1526269343113">1526269343113</a></li><li><a href="#slow">slow</a></li><li><a href="#slow2">slow2</a></li><li><a href="#Benchmark">Benchmark</a></li><li><a href="#modal">modal</a></li><li><a href="#buma">buma</a></li><li><a href="#1526099371108">1526099371108</a></li><a href="#1526099371108o">1526099371108o</a></li><li><a href="#pwnClrB">pwnClrB</a></li><li><a href="#stars%20u">stars%20u</a></li><li><a href="#pwnClrC">pwnClrC</a></li><li><a href="#stars ">stars </a></li><li><a href="#wello">wello</a></li><li><a href="#equalizer">equalizer</a></li><li><a href="#pwnClrA">pwnClrA</a></li></ul>
 
 </div>




Es 2017 y es posible orientar las opciones de selección específicas. En mi proyecto, tengo una tabla con una clase = "variaciones" , y las opciones de selección están en la celda de la tabla td = "valor" , y la selección tiene una ID que selecciona # pa_color . El elemento de opción también tiene una opción de clase = "adjunta" (entre otras etiquetas de clase). Si un usuario inicia sesión como cliente mayorista, puede ver todas las opciones de color. Pero los clientes minoristas no pueden comprar 2 opciones de color, así que los he deshabilitado

<option class="attached" disabled>color 1</option>
<option class="attached" disabled>color 2</option>

Tomó un poco de lógica, pero así es como me enfoqué en las opciones de selección de discapacitados.

CSS

table.variations td.value select#pa_color option.attached:disabled {
display: none !important;
}

Con eso, mis opciones de color solo son visibles para clientes mayoristas.




Como se dijo anteriormente, no es realmente posible; sin embargo, si solo desea configurar el estado inicial para algo así como una opción 'Seleccionar producto ...' antes de que un usuario interactúe con el campo, podría hacer algo como lo siguiente:

Los estilos de ejemplo a continuación (técnicamente todos) la primera opción es roja y una vez que el usuario interactúa eliminará esa opción (que tiene el valor = "valor por defecto" establecido) y eliminará la clase aplicada a la selección. Puede aplicar otras opciones además del color, pero solo afectarán el campo una vez cambiado, no la vista de lista.

CSS

.default-value{
  color: red;
}

jQuery

$("select").addClass('default-value');

$("select").bind("focus", function () {
  $(this).children('option[value="defaultValue"]').remove();
  $(this).removeClass('default-value');
});



Related

html css drop-down-menu