¿Cómo diseñar la opción de un elemento "select" html?


202

Aquí está mi HTML:

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

Quiero poner en negrita el nombre del producto (es decir, 'Producto1', 'Producto2', etc.) y sus categorías (por ejemplo, Electrónica, Deportes, etc.) en cursiva, utilizando solo CSS. Encontré una vieja pregunta que mencionaba que no es posible usar HTML y CSS, pero con suerte, ahora hay una solución.


No estoy seguro de este. Por creo que no. Necesitarás algo de magia de JavaScript (jQuery) para que eso suceda.
El fantasma de Madara

66
las opciones siguen siendo tan molestas para el estilo como siempre lo han sido. lo que es posible que desee usar es un optgroup: htmlhelp.com/reference/html40/forms/optgroup.html, esto le dará una categoría en negrita y en cursiva (como Electrónica) en la que se incluyen varias opciones.
wolv2012

Respuestas:


202

Solo hay unos pocos atributos de estilo que se pueden aplicar a un <option>elemento.

Esto se debe a que este tipo de elemento es un ejemplo de un "elemento reemplazado". 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 se parecen a un <select>pero en realidad están compuestos de HTMLelementos regulares que PUEDEN ser diseñados.


2
Este comportamiento varía a través de diferentes navegadores y diferentes sistemas operativos; Vale la pena aclarar si habla principalmente de IE en Windows.
Vince Bowdren

44
Puede select > optiondiseñar, pero no hay una solución de crossbrowser confiable para hacerlo y, al menos en Chrome, puede personalizar como máximo el tamaño de fuente, la familia, el fondo y el color de primer plano. Tal vez algunos ajustes más, pero cosas como el relleno, el color flotante y demás no pude cambiar. De hecho, puede haber alternativas, pero dependiendo del proyecto, la etiqueta <select> podría ser necesaria, por ejemplo, para la validación angular u otra razón.
Felype

3
@ninguno he publicado una respuesta a las etiquetas de opciones de estilo . No muestra cómo diseñar <option>, pero muestra cómo emular <select>para que pueda diseñar las opciones.
UndoingTech

3
Aunque esta es la respuesta aceptada, es posible OPTION
diseñar

2
En la introducción de dispositivos móviles, esto es aún menos estilizable, ya que los elementos de opciones ni siquiera se muestran en relación con la selección en el flujo de la página, se enumera en una sección desplazable separada en la parte inferior de la pantalla, con un estilo muy diferente al como esperas en un navegador tradicional.
temor

74

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

Excepto por background-colory color, las configuraciones de estilo aplicadas a través del objeto de estilo para el elemento de opción se ignoran.


así que la conclusión es: "la opción de una selección no se puede diseñar parcialmente solo con CSS", ¿verdad? :(
MrClan

27
El punto importante aquí es que se pueden diseñar, solo muy mínimamente.
devios1

1
Para agregar al punto de devios: la selección nativa puede tener un estilo mínimo para Windows, pero no necesariamente para otros sistemas operativos. Como pumbo menciona a continuación, necesitará cambiar la selección por otros elementos (generalmente un ul) y duplicar la funcionalidad de selección en JavaScript para tener un control total sobre los estilos.
Benjamin Robinson

3
<option style = "color: 'red';"> no funciona para mí ... ¿sugerencia?
fabio

1
style="background-color: red;color: red;"no funciona para mi EDITAR: después de cerrar la consola del desarrollador, se aplicó el estilo.
Negro

33

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

Con 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í:

ingrese la descripción de la imagen aquí


2
Eso es cierto solo porque todos los selectores se dirigen a las entrañas DOM de sombra, puede orientarlas manualmente por navegador.
mystrdat

20

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

html

<select id="selectbox1">
    <option value="">Select an option&hellip;</option>
    <option value="aye">Aye</option>
    <option value="eh">Eh</option>
    <option value="ooh">Ooh</option>
    <option value="whoop">Whoop</option>
</select>
<select id="selectbox2">
    <option value="">Month&hellip;</option>
    <option value="january">January</option>
    <option value="february">February</option>
    <option value="march">March</option>
    <option value="april">April</option>
    <option value="may">May</option>
    <option value="june">June</option>
    <option value="july">July</option>
    <option value="august">August</option>
    <option value="september">September</option>
    <option value="october">October</option>
    <option value="november">November</option>
    <option value="december">December</option>
</select>

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('<div class="select"></div>');

    // Insert a styled div to sit over the top of the hidden select element
    $this.after('<div class="styledSelect"></div>');

    // 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 = $('<ul />', {
        'class': 'options'
    }).insertAfter($styledSelect);

    // Insert a list item into the unordered list for each select option
    for (var i = 0; i < numberOfOptions; i++) {
        $('<li />', {
            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();
    });

});

1
¿podría por favor publicar el código aquí porque tal vez algún día será eliminado pero aquí permanecerá en el lugar de guardado
Mohammad Alabed

Es una forma muy dinámica de hacer lo que desea con la selección, si tiene una mejor opción, me complacerá verla como una respuesta aquí @ahnbizcad
Anahit DEV

17
Este NO es un <select> html nativo , solo vuelve a representar uno con algún código jQuery. Si tu vas a hacer esto podría también utilizar un plugin de jQuery, Reaccionar componente, etc., que arriba el teclado asas / ABAJO, typeahead / búsqueda etc
John Culviner

10

Aquí hay algunas formas de estilo <option>junto con el <select>si está usando Bootstrap y / o jquery. Entiendo que esto no es lo que pide el póster original, pero pensé que podría ayudar a otros que se topan con esta pregunta.

Aún puede lograr el objetivo de diseñar cada uno por <option>separado, pero es posible que también deba aplicar un poco de estilo <select>. Mi favorita es la biblioteca "Bootstrap Select" mencionada a continuación.


Bootstrap Select Library (jquery)

Si ya está usando bootstrap, puede probar la biblioteca Bootstrap Select o la biblioteca a continuación (ya que tiene un tema de bootstrap).

Tenga en cuenta que puede diseñar el selectelemento completo o los optionelementos por separado.

Ejemplos :

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí

Dependencias : requiere jQuery v1.9.1 +, Bootstrap , el componente dropdown.js de Bootstrap y CSS de Bootstrap

Compatibilidad : inseguro, pero bootstrap dice que "admite las versiones más recientes y estables de todos los principales navegadores y plataformas"

Demostración : https://developer.snapappointments.com/bootstrap-select/examples/

.special {
  font-weight: bold !important;
  color: #fff !important;
  background: #bc0000 !important;
  text-transform: uppercase;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>

<select class="selectpicker">
  <option>Mustard</option>
  <option class="special">Ketchup</option>
  <option style="background: #5cb85c; color: #fff;">Relish</option>
</select>


Select2 (JS lib)

Hay una biblioteca que puede usar llamada Select2 .

select2

Dependencias : la biblioteca es solo JS + CSS + HTML (no requiere JQuery).

Compatibilidad : IE 8+, Chrome 8+, Firefox 10+, Safari 3+, Opera 10.6+

Demostración : https://select2.org/getting-started/basic-usage

También hay un tema de arranque disponible.

Ningún ejemplo de Bootstrap:

$(function() {
  var $select = $('.select2');
  
  $select.select2({
    theme: 'paper'
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet"/>

<select class="select2 form-control" placeholder="Country">
  <optgroup label="Alaskan/Hawaiian Time Zone">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
  </optgroup>
  <optgroup label="Pacific Time Zone">
    <option value="CA">California</option>
    <option value="NV">Nevada</option>
    <option value="OR">Oregon</option>
    <option value="WA">Washington</option>
  </optgroup>
</select>

Ejemplo de Bootstrap:

$(function() {
  var $select = $('.select2');
  
  $select.select2({
    theme: 'paper'
  });
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.2/paper/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet"/>

<select class="select2 form-control" placeholder="Country">
  <optgroup label="Alaskan/Hawaiian Time Zone">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
  </optgroup>
  <optgroup label="Pacific Time Zone">
    <option value="CA">California</option>
    <option value="NV">Nevada</option>
    <option value="OR">Oregon</option>
    <option value="WA">Washington</option>
  </optgroup>
</select>


MDBootstrap ($ y Bootstrap y JQuery)

Si tiene dinero extra, puede usar una biblioteca premium MDBootstrap . (Este es un kit de interfaz de usuario completo , por lo que no es ligero)

Esto le permite diseñar sus elementos de selección y opción utilizando el diseño de Material .

ingrese la descripción de la imagen aquí

¡Hay una versión gratuita, pero no te permitirá usar el bonito diseño Material!

Dependencias : Bootstrap 4 , JQuery,

Compatibilidad : "admite las versiones más recientes y estables de todos los principales navegadores y plataformas".

Demostración : https://mdbootstrap.com/docs/jquery/forms/select/#color


19
Porque la pregunta es sobre el estilo del elemento de opción , no del elemento de selección .
Jsalinas

55
Esta respuesta es engañosa, porque si bien demuestra explícitamente que puede diseñar la selección , afirma que la opción es lo que se puede diseñar, a pesar de que es un elemento del sistema operativo que solo acepta un estilo CSS mínimo.
Andrew Gray

@Jsalinas lo siento, mi respuesta anterior fue atroz. Lo he reemplazado por uno que espero sea mejor.
Katie

1
¡Gran respuesta! Buenos ejemplos!
cskwg

Select2 4.0 ya no es puro, ya que ahora se basa en jQuery.
Galmok

9

Parece que puedo configurar el CSS para selectChrome directamente. Código CSS y HTML proporcionado a continuación:

.boldoption {
	font-weight: bold;
}
<select>
	<option>Some normal-font option</option>
	<option>Another normal-font option</option>
	<option class="boldoption">Some bold option</option>
</select>
ingrese la descripción de la imagen aquí


2
@ Muhammad Al Khalil: Actualicé el ejemplo para que sea más claro, ya que la opción seleccionada actualmente también tiene su propio estilo. Si eso no funciona, sospecho que hay problemas de compatibilidad del navegador. = \
HoldOffHunger

3
@Akash: Interesante, esto funcionó en Firefox antes de lanzar Firefox Quantum, y todavía funciona en Chrome (más del 60% de los usuarios). ¡Apuesto a que es un error!
HoldOffHunger

1
Esto solo funciona para el menú desplegable, no para lo que se muestra como seleccionado. Demasiado.
WebDude0482



2

Algunas propiedades se pueden diseñar para la <option>etiqueta:

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

También puede usar fuentes personalizadas para <option>etiquetas individuales , por ejemplo, cualquier fuente de Google , iconos de materiales u otras fuentes de iconos de icomoon o similares. (Eso puede ser útil para los selectores de fuente, etc.)

Teniendo en cuenta eso, puede crear una pila de familia de fuentes e insertar iconos en las <option>etiquetas, por ejemplo.

    <select>
        <option style="font-family: 'Icons', 'Roboto', sans-serif;">a    ★★★</option>
        <option style="font-family: 'Icons', 'Roboto', sans-serif;">b    ★★★★</option>
    </select>

de dónde se toma Iconsy el resto es de Roboto.

Sin embargo, tenga en cuenta que las fuentes personalizadas no funcionan para la selección móvil.


<option style = "color: 'red';"> no funciona para mí ... ¿sugerencia?
fabio

1
Eliminar comillas sobre red: <option style = "color: red;">
dy_

1

En realidad, puede agregar: before y: after y darles 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;
}


1

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 la tabla td = "valor" , y la selección tiene un ID select # 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 a los clientes minoristas no se les permite comprar 2 opciones de color, así que los he desactivado

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

Tomó un poco de lógica, pero así es como apunté 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.


1

Dejando aquí una alternativa rápida, usando el cambio de clase en una mesa. El comportamiento es muy similar al de un select, pero se puede diseñar con transición, filtros y colores, cada uno 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}
<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>


1

Puede usar estilos en línea para agregar un estilo personalizado a las <option>etiquetas.

Por ejemplo: <option style="font-weight:bold;color:#09C;">Option 1</option> Esto aplicará los estilos solo a este <option>elemento en particular .

Luego puede usar un poco de magia javascript para aplicar los estilos en línea a todos los <option>elementos dentro de una <select>etiqueta de esta manera:

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 <option value="" disabled> <br> </option>para agregar un salto de línea entre las opciones.


0

Este elemento lo representa 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("<span class='item' id='"+$(this).attr('value')+"'>"+text+"</span>");
				});
		});

	});
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;
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
	<form action="?" method="GET">
	<label><span class="selected">select..</span> <span class="lists"></span>
	<select name="test">
		<option value="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</option>
		<option value="2" selected>item 2</option>
		<option value="3">item 3</option>
		<option value="4">item 4</option>
	</select>
	</label><br>
	<label><span class="selected">select..</span> <span class="lists"></span>
	<select name="test2">
		<option value="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</option>
		<option value="2">item 2</option>
		<option value="3" selected>item 3</option>
		<option value="4">item 4</option>
	</select>
	</label><br>
	<button>Submit</button>
</form>

</body>
</html>

prueba esto te puede ayudar

[ https://codepen.io/venu9l/pen/jeNXzY][1]

0

Puede agregar una clase y da el peso de fuente: 700; en opcion. Pero al usar esto, todo el texto se pondrá en negrita.


0

Definitivamente funcionará. El sistema operativo representa la opción de selección, no html. Es por eso que el estilo CSS no tiene efecto ... generalmente option{font-size : value ; background-color:colorCode; border-radius:value; }
esto funcionará, pero no podemos personalizar el relleno, el margen, etc.

Debajo del código, el 100% funciona para personalizar la etiqueta de selección tomada de este ejemplo

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);
}
<div class="custom-select" style="width:200px;">
  <select>
    <option value="0">Select car:</option>
    <option value="1">Audi</option>
    <option value="2">BMW</option>
    <option value="3">Citroen</option>
    <option value="4">Ford</option>
    <option value="5">Honda</option>
    <option value="6">Jaguar</option>
    <option value="7">Land Rover</option>
    <option value="8">Mercedes</option>
    <option value="9">Mini</option>
    <option value="10">Nissan</option>
    <option value="11">Toyota</option>
    <option value="12">Volvo</option>
  </select>
</div>


De la opinión: Hola, por favor no responda solo con el código fuente. Intente proporcionar una buena descripción sobre cómo funciona su solución. Ver: ¿Cómo escribo una buena respuesta? . Gracias
sɐunıɔ ןɐ qɐp


0

Incluso si no hay muchas propiedades para cambiar, pero puede lograr el siguiente estilo solo con css:

ingrese la descripción de la imagen aquí

HTML:

<div class="options">
    <select>
        <option value="">Apple</option>
        <option value="">Banana</option>
        <option value="">Orange</option>
        <option value="">Mango</option>
    </select>
</div>

CSS:

.options {

    border: 1px solid #e5e5e5;
    padding: 10px;

    select {
        font-size: 14px;
        border: none;
        width: 100%;
        background: white;
    }
}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.