¿Cómo estilizar la opción de un elemento html “seleccionar”?

Aquí está mi HTML:

 Product1 : Electronics  Product2 : Sports   

Quiero poner el nombre del producto (es decir, ‘Producto1’, ‘Producto2’, etc.) en negrita, y sus categorías (a saber, Electrónica, Deportes, etc.) en cursiva, solo con CSS. Encontré una vieja pregunta que menciona que no es posible usar HTML y CSS, pero espero que haya una solución ahora.

En general, no puedes. Este elemento es un ejemplo de un “elemento reemplazado”, estos dependen del sistema operativo y no forman parte del navegador / HTML. No se puede diseñar a través de CSS .

Hay complementos / bibliotecas de reemplazo que parecen un pero en realidad están compuestos de elementos HTML normales que PUEDEN ser estilizados.

No, no es posible, ya que el sistema operativo del usuario maneja el estilo de estos elementos. MSDN responderá su pregunta aquí :

A excepción background-color de background-color y el color , las configuraciones de estilo aplicadas a través del objeto de estilo para el elemento de opción se ignoran

Puede aplicar un estilo a los elementos de 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í:

introduzca la descripción de la imagen aquí

Encontré y usando este buen ejemplo de estilo de selecciones y opciones. Puedes hacer con esta selección todo lo que quieras. Aquí está el violín.

html

   

css

 body { padding:50px; background-color:white; } .s-hidden { visibility:hidden; padding-right:10px; } .select { cursor:pointer; display:inline-block; position:relative; font:normal 11px/22px Arial, Sans-Serif; color:black; border:1px solid #ccc; } .styledSelect { position:absolute; top:0; right:0; bottom:0; left:0; background-color:white; padding:0 10px; font-weight:bold; } .styledSelect:after { content:""; width:0; height:0; border:5px solid transparent; border-color:black transparent transparent transparent; position:absolute; top:9px; right:6px; } .styledSelect:active, .styledSelect.active { background-color:#eee; } .options { display:none; position:absolute; top:100%; right:0; left:0; z-index:999; margin:0 0; padding:0 0; list-style:none; border:1px solid #ccc; background-color:white; -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.2); -moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.2); box-shadow:0 1px 2px rgba(0, 0, 0, 0.2); } .options li { padding:0 6px; margin:0 0; padding:0 10px; } .options li:hover { background-color:#39f; color:white; } 

JS

 // Iterate over each select element $('select').each(function () { // Cache the number of options var $this = $(this), numberOfOptions = $(this).children('option').length; // Hides the select element $this.addClass('s-hidden'); // Wrap the select element in a div $this.wrap('
'); // Insert a styled div to sit over the top of the hidden select element $this.after('
'); // Cache the styled div var $styledSelect = $this.next('div.styledSelect'); // Show the first select option in the styled div $styledSelect.text($this.children('option').eq(0).text()); // Insert an unordered list after the styled div and also cache the list var $list = $('
    ', { 'class': 'options' }).insertAfter($styledSelect); // Insert a list item into the unordered list for each select option for (var i = 0; i < numberOfOptions; i++) { $('
  • ', { text: $this.children('option').eq(i).text(), rel: $this.children('option').eq(i).val() }).appendTo($list); } // Cache the list items var $listItems = $list.children('li'); // Show the unordered list when the styled div is clicked (also hides it if the div is clicked again) $styledSelect.click(function (e) { e.stopPropagation(); $('div.styledSelect.active').each(function () { $(this).removeClass('active').next('ul.options').hide(); }); $(this).toggleClass('active').next('ul.options').toggle(); }); // Hides the unordered list when a list item is clicked and updates the styled div to show the selected list item // Updates the select element to have the value of the equivalent option $listItems.click(function (e) { e.stopPropagation(); $styledSelect.text($(this).text()).removeClass('active'); $this.val($(this).attr('rel')); $list.hide(); /* alert($this.val()); Uncomment this for demonstration! */ }); // Hides the unordered list when clicking outside of it $(document).click(function () { $styledSelect.removeClass('active'); $list.hide(); }); });

    Parece que solo puedo configurar el CSS para la select en Chrome directamente. Código CSS y HTML proporcionado a continuación:

     .boldoption { font-weight: bold; } 
      

    ¡Usted puede totalmente estilo! ¡No comprendo algunas de las respuestas de 2014 que dicen que no puedes ponerle estilo! CSS3 funciona de maravilla. Intenté esto en mi propio código, y las “opciones” desplegables se diseñaron de la misma forma en que se diseñaría el estilo “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; } 

    Encontré esta increíble biblioteca que reemplaza el elemento estándar “select” en HTML con elementos “select” con un estilo impresionante : Select2https://select2.github.io/examples.html

    Como ya se mencionó, la única forma es usar un complemento que reemplace la funcionalidad .

    Una lista de complementos de jQuery: http://plugins.jquery.com/tag/select/

    Eche un vistazo al ejemplo utilizando el complemento Select2 : http://jsfiddle.net/swsLokfj/23/

    Bootstrap te permite usar el estilo a través del contenido de datos:

      

    Ejemplo: https://silviomoreto.github.io/bootstrap-select/examples/

    Dejando aquí una alternativa rápida, usando el conmutador de clase en una tabla. El comportamiento es muy similar al de una selección, pero se puede diseñar con transición, filtros y colores, para cada niño individualmente.

     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} 
       

    Este elemento es representado por el sistema operativo, no HTML. No se puede diseñar a través de CSS.

      $(function() { var clicky; var t=0; $(document).mousedown(function(e) { clicky = $(e.target); }); $(document).mouseup(function(e) { clicky = null; }); $("select").focusout(function(e) { if (typeof clicky.attr('id') !== typeof undefined && clicky.attr('id') !== false) { $(this).parents().children("span.selected").html(clicky.html()); $(this).children('option[value="'+clicky.attr('id')+'"]').prop('selected', true); } $(this).parents().children("span.lists").html(''); }); $('select > option').text(function(i, text) { var attr = $(this).attr('selected'); if (typeof attr !== typeof undefined && attr !== false) { $(this).parents().parents().children("span.selected").html(text); } }); $("select").focusin(function(){ $(this).children('option').text(function(i, text) { $(this).parents().children("span.lists").append(""+text+""); }); }); }); 
     select { width: 0px; height: 0px; overflow:hidden; outline: none; border: none; appearance:none; -moz-appearance: none; } label{ display: inline-block; padding: 5px 10px; position: relative; width: 100px; height: 20px; background-color:#ccc; } label .selected{ display: inline-block; overflow: hidden; width: 100%; height: 100%; } label span.lists{ width: 100%; display: inline-block; position: absolute; top: 100%; left: 0px; box-shadow: 0px 0px 2px 0px #ccc; background-color:#fff; z-index: 9; } label span.item{ display: inline-block; width: 100%; border-bottom: 1px solid #ccc; } 
         Document    


    De hecho, puedes agregar: antes y: después y estilo. Al menos es algo

     option{ font-size:18px; background-color:#ffffff; } option:before{ content: ">"; font-size:20px; display:none; padding-right:10px; padding-left:5px; color:#fff; } option:hover:before{ display:inline; } 

    Es 2017 y es posible apuntar a 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 tabla td = “valor” , y la selección tiene un ID de selección # pa_color . El elemento de opción también tiene una opción de clase = “adjunta” (entre otras tags de clase). Si un usuario ha iniciado sesión como cliente mayorista, puede ver todas las opciones de color. Pero a los clientes minoristas no se les permite comprar 2 opciones de color, así que los deshabilité

       

    Tomó un poco de lógica, pero aquí es cómo me dirigí a las opciones de selección deshabilitadas.

    CSS

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

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

    Algunas propiedades se pueden diseñar para la etiqueta :

    • font-family
    • color
    • font-*
    • background-color

    También puede usar fonts personalizadas para tags individuales, por ejemplo, cualquier fuente de Google , Íconos de Materiales u otras fonts de icons de icomoon o similares. (Eso puede ser útil para los selectores de fonts, etc.)

    Teniendo en cuenta esto, puede crear una stack de familias de fonts e insertar icons en las tags , por ejemplo.

       

    donde se toma de Icons y el rest es de Roboto .

    Tenga en cuenta que las fonts personalizadas no funcionan para la selección móvil.

    Puede usar estilos en línea para agregar estilos de estilo a las tags .

    Por ejemplo: Esto aplicará los estilos solo a este elemento en particular .

    Luego, puede usar un poco de magia javascript para aplicar los estilos en línea a todos los elementos dentro de una etiqueta así:

    var select = $(document).getElementById('#select-element-id')

    var option = select.children('#option-element-id')

    option.css('font-weight', 'bold')

    option.css('font-size', '24px')

    También puede usar para agregar un salto de línea entre las opciones.

    Es 100% funcional, básicamente, la opción de selección es representada por OS y no por HTML. Eso por el estilo CSS no tiene efecto, .. generalmente la opción {font-size: value; color de fondo: código de color; radio de borde: valor; } este caso funciona, pero no podemos personalizar el relleno, el margen, etc. A continuación, el código funciona al 100% para personalizar la etiqueta de selección

     var x, i, j, selElmnt, a, b, c; /*look for any elements with the class "custom-select":*/ x = document.getElementsByClassName("custom-select"); for (i = 0; i < x.length; i++) { selElmnt = x[i].getElementsByTagName("select")[0]; /*for each element, create a new DIV that will act as the selected item:*/ a = document.createElement("DIV"); a.setAttribute("class", "select-selected"); a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML; x[i].appendChild(a); /*for each element, create a new DIV that will contain the option list:*/ b = document.createElement("DIV"); b.setAttribute("class", "select-items select-hide"); for (j = 1; j < selElmnt.length; j++) { /*for each option in the original select element, create a new DIV that will act as an option item:*/ c = document.createElement("DIV"); c.innerHTML = selElmnt.options[j].innerHTML; c.addEventListener("click", function(e) { /*when an item is clicked, update the original select box, and the selected item:*/ var y, i, k, s, h; s = this.parentNode.parentNode.getElementsByTagName("select")[0]; h = this.parentNode.previousSibling; for (i = 0; i < s.length; i++) { if (s.options[i].innerHTML == this.innerHTML) { s.selectedIndex = i; h.innerHTML = this.innerHTML; y = this.parentNode.getElementsByClassName("same-as-selected"); for (k = 0; k < y.length; k++) { y[k].removeAttribute("class"); } this.setAttribute("class", "same-as-selected"); break; } } h.click(); }); b.appendChild(c); } x[i].appendChild(b); a.addEventListener("click", function(e) { /*when the select box is clicked, close any other select boxes, and open/close the current select box:*/ e.stopPropagation(); closeAllSelect(this); this.nextSibling.classList.toggle("select-hide"); this.classList.toggle("select-arrow-active"); }); } function closeAllSelect(elmnt) { /*a function that will close all select boxes in the document, except the current select box:*/ var x, y, i, arrNo = []; x = document.getElementsByClassName("select-items"); y = document.getElementsByClassName("select-selected"); for (i = 0; i < y.length; i++) { if (elmnt == y[i]) { arrNo.push(i) } else { y[i].classList.remove("select-arrow-active"); } } for (i = 0; i < x.length; i++) { if (arrNo.indexOf(i)) { x[i].classList.add("select-hide"); } } } /*if the user clicks anywhere outside the select box, then close all select boxes:*/ document.addEventListener("click", closeAllSelect); 
     /*the container must be positioned relative:*/ .custom-select { position: relative; font-family: Arial; } .custom-select select { display: none; /*hide original SELECT element:*/ } .select-selected { background-color: DodgerBlue; } /*style the arrow inside the select element:*/ .select-selected:after { position: absolute; content: ""; top: 14px; right: 10px; width: 0; height: 0; border: 6px solid transparent; border-color: #fff transparent transparent transparent; } /*point the arrow upwards when the select box is open (active):*/ .select-selected.select-arrow-active:after { border-color: transparent transparent #fff transparent; top: 7px; } /*style the items (options), including the selected item:*/ .select-items div,.select-selected { color: #ffffff; padding: 8px 16px; border: 1px solid transparent; border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent; cursor: pointer; } /*style items (options):*/ .select-items { position: absolute; background-color: DodgerBlue; top: 100%; left: 0; right: 0; z-index: 99; } /*hide the items when the select box is closed:*/ .select-hide { display: none; } .select-items div:hover, .same-as-selected { background-color: rgba(0, 0, 0, 0.1); } 
     

    Puedes agregar una clase y da el peso de fuente: 700; en opción Pero al usar esto todo el texto se pondrá en negrita.

    Como se dijo anteriormente, no es realmente posible; sin embargo, si solo desea aplicar un estilo al estado inicial para algo como una opción ‘Seleccionar producto …’ antes de que un usuario interactúe con el campo, puede hacer algo como a continuación:

    Los siguientes ejemplos de estilos (técnicamente todos) la primera opción roja y una vez que el usuario interactúa eliminarán esa opción (que tiene el valor = “valor predeterminado” establecido) y eliminarán la clase aplicada a la selección. También puede aplicar otras opciones además del color, pero solo afectarán al campo una vez cambiado, no a 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'); });