Como estilizar a opção de um elemento html "select"?

202

Aqui está o meu HTML:

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

Quero deixar o nome do produto (ou seja, 'Produto1', 'Produto2', etc) em negrito e suas categorias (viz. Eletrônicos, Esportes, etc.) em itálico, usando apenas CSS. Encontrei uma pergunta antiga que mencionava que não é possível usar HTML e CSS, mas espero que exista uma solução agora.

MrClan
fonte
Não tenho certeza sobre este. Acho que não. Você precisará de alguma mágica JavaScript (jQuery) para que isso aconteça.
Ghost de Madara
6
as opções ainda são tão irritantes para o estilo como sempre foram. o que você pode querer usar é um optgroup: htmlhelp.com/reference/html40/forms/optgroup.html, isso fornecerá uma categoria em negrito e itálico (como Eletrônica) na qual várias opções se enquadram.
precisa saber é o seguinte

Respostas:

202

Existem apenas alguns atributos de estilo que podem ser aplicados a um <option>elemento.

Isso ocorre porque esse tipo de elemento é um exemplo de um "elemento substituído". Eles dependem do sistema operacional e não fazem parte do HTML / navegador. Não pode ser estilizado via CSS.

Existem plug-ins / bibliotecas de substituição que se parecem com um, <select>mas são realmente compostos de HTMLelementos regulares que podem ser estilizados.

Diodeus - James MacFarlane
fonte
2
Esse comportamento varia entre diferentes navegadores e diferentes sistemas operacionais; vale a pena esclarecer se você está falando principalmente sobre o IE no Windows.
precisa saber é o seguinte
4
Você pode estilizar select > option, mas não há uma solução confiável de navegador cruzado para fazê-lo. No Chrome, pelo menos, você pode personalizar o tamanho da fonte, a família, o plano de fundo e a cor do primeiro plano. Talvez mais alguns ajustes, mas coisas como estofamento, cor do cursor e outras coisas que não consegui mudar. De fato, pode haver alternativas, mas, dependendo do projeto, a tag <select> pode ser necessária, por exemplo, para validação angular ou por algum outro motivo.
Felype 6/07/2015
3
@ ninguém Postou uma resposta para as tags de opção de estilo . Ele não mostra como estilizar <option>, mas mostra como emular <select>para que você possa estilizar as opções.
UndoingTech
3
Embora esta seja a resposta aceita, é possível estilo OPTIONcom CSS com os navegadores modernos - adicionar uma marca de estilo para a opção
Jimmery
2
Na introdução de dispositivos móveis, isso é ainda menos estiloso, pois os elementos de opções nem são exibidos em relação à seleção no fluxo da página - ele é listado em uma seção rolável separada na parte inferior da tela - com um estilo muito diferente do que como você espera em um navegador tradicional.
temor
74

Não, não é possível, pois o estilo desses elementos é tratado pelo sistema operacional do usuário. O MSDN responderá sua pergunta aqui :

Exceto por background-colore color, as configurações de estilo aplicadas através do objeto de estilo para o elemento de opção são ignoradas.

esqew
fonte
então a conclusão é: "a opção de um select não pode ser parcialmente estilizada apenas com CSS", certo ??? :(
MrClan
27
O ponto importante aqui é que eles podem ser estilizados, apenas muito minimamente.
devios1
1
Para acrescentar ao ponto do devios - a seleção nativa pode ter um estilo minimalista para o Windows, mas não necessariamente para outros sistemas operacionais. Como a pumbo menciona abaixo, você precisará trocar a seleção por outros elementos (geralmente um ul) e duplicar a funcionalidade de seleção no JavaScript para ter controle total sobre os estilos.
Benjamin Robinson
3
<option style = "color: 'red';"> não funciona para mim ... sugestão?
Fabio
1
style="background-color: red;color: red;"Nao funciona para mim. EDIT: Após fechar o console do desenvolvedor, o estilo foi aplicado.
Preto
33

Você pode estilizar os elementos de opção até certo ponto.

Usando a tag * CSS, você pode estilizar as opções dentro da caixa desenhada pelo sistema.

Exemplo:

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

Isso ficará assim:

insira a descrição da imagem aqui

Zoron19
fonte
2
Isso é verdade apenas porque o seletor all segmenta as entranhas DOM da sombra, você pode segmentar manualmente as por navegador.
mystrdat
20

Eu encontrei e usar este bom exemplo de denominar os seleciona e options.You pode fazer com esta escolha tudo o que você want.Here é o Fiddle

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();
    });

});
Anahit Ghazaryan
fonte
1
você poderia por favor postar o código aqui, porque talvez um dia ele seja removido, mas aqui ele ficará no local de salvamento
Mohammad Alabed
É maneira muito dinâmica de fazer o que quiser com a seleção, se você vai ter uma opção melhor eu vou ser feliz em vê-lo como uma resposta aqui @ahnbizcad
Anahit DEV
17
Este NÃO é um html nativo <select> , apenas renderiza outro com algum código jQuery. Se o seu vai fazer isso poderia muito bem usar um plugin jQuery, Reagir componente etc. que alças teclado UP / DOWN, typeahead / pesquisar etc.
John Culviner
10

Aqui estão algumas maneiras de estilizar <option>junto com o<select> se você estiver usando o Bootstrap e / ou o jquery. Entendo que não é isso que o pôster original está perguntando, mas pensei em ajudar outras pessoas que se deparam com essa pergunta.

Ainda é possível atingir o objetivo de estilizar cada um <option>separadamente, mas também pode ser necessário aplicar algum estilo <select>. O meu favorito é a biblioteca "Bootstrap Select" mencionada abaixo.


Biblioteca de Seleção do Bootstrap (jquery)

Se você já estiver usando o bootstrap, tente a biblioteca Bootstrap Select ou a biblioteca abaixo (já que ele tem um tema de bootstrap).

Observe que você pode estilizar o selectelemento inteiro ou os optionelementos separadamente.

Exemplos :

insira a descrição da imagem aqui

insira a descrição da imagem aqui

insira a descrição da imagem aqui

Dependências : requer jQuery v1.9.1 +, Bootstrap , o componente dropdown.js do Bootstrap e o CSS do Bootstrap

Compatibilidade : inseguro, mas o bootstrap diz que "suporta as versões mais recentes e estáveis ​​de todos os principais navegadores e plataformas"

Demonstração : 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/[email protected]/dist/css/bootstrap-select.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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)

Há uma biblioteca que você pode usar chamada Select2 .

select2

Dependências : a biblioteca é apenas JS + CSS + HTML (não requer JQuery).

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

Demo : https://select2.org/getting-started/basic-usage

Há também um tema de inicialização disponível.

Nenhum exemplo 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>

Exemplo de inicialização:

$(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 ($ & Bootstrap & JQuery)

Se você tiver dinheiro extra, poderá usar uma biblioteca premium MDBootstrap . (Este é um kit de interface do usuário inteiro , portanto não é leve)

Isso permite que você estilize seus elementos de seleção e opção usando o design do material .

insira a descrição da imagem aqui

Existe uma versão gratuita, mas não permitirá que você use o bonito design de materiais!

Dependências : Bootstrap 4 , JQuery,

Compatibilidade : "suporta as versões mais recentes e estáveis ​​de todos os principais navegadores e plataformas".

Demonstração : https://mdbootstrap.com/docs/jquery/forms/select/#color

Katie
fonte
19
Como a pergunta é sobre estilizar o elemento option , não o elemento select .
Jsalinas
5
Essa resposta é enganosa, porque, embora você mostre explicitamente que é possível estilizar a seleção , você afirma que a opção é o que pode ser estilizado, mesmo que seja um elemento do SO que aceite apenas um estilo CSS mínimo.
Andrew Gray
@Jsalinas desculpe, minha resposta anterior foi atroz. Substituí-o por um que, espero, seja melhor.
Katie
1
Ótima resposta! Bons exemplos!
Cspwg
O Select2 4.0 não é mais puro, pois agora se baseia no jQuery.
galmok
9

Parece que eu posso definir o CSS selectdiretamente no Chrome. Código CSS e HTML fornecido abaixo:

.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>
insira a descrição da imagem aqui

HoldOffHunger
fonte
2
@ Muhamed Al Khalil: atualizei o exemplo para ficar mais claro, já que a opção atualmente selecionada também tem seu próprio estilo. Se isso não funcionar, desconfio de problemas de compatibilidade do navegador. = \
HoldOffHunger
3
@ Akash: Interessante, isso funcionou no Firefox antes do lançamento do Firefox Quantum, e ainda funciona no Chrome (mais de 60% dos usuários). Aposto que é um bug!
HoldOffHunger
1
Isso funciona apenas para a lista suspensa, não para o que é exibido como selecionado. Que pena.
WebDude0482
3

O Bootstrap permite usar o estilo via conteúdo de dados:

<select class="selectpicker">
  <option data-content="<span class='label label-success'>Relish</span>">Relish</option>
</select>

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

Bhetzie
fonte
9
O HTML incorporado nos atributos dos dados me faz sentir muito nojento.
Ben Hull
2

Algumas propriedades podem ser denominadas para <option>tag:

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

Além disso, você pode usar fontes personalizadas para <option>etiquetas individuais , por exemplo, qualquer fonte do google , ícones de materiais ou outras fontes de ícones da icomoon ou similares. (Isso pode ser útil para seletores de fontes etc.)

Considerando isso, você pode criar uma pilha da família de fontes e inserir ícones em <option>tags, por exemplo.

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

de onde é tirado Iconse o resto é Roboto.

Observe que as fontes personalizadas não funcionam na seleção para dispositivos móveis.

dy_
fonte
<option style = "color: 'red';"> não funciona para mim ... sugestão?
Fabio
1
Remova as aspas sobre red: <option style = "color: red;">
dy_
1

Na verdade, você pode adicionar: antes e: depois e estilizá-las. Pelo menos é alguma coisa

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;
}

ProSales Softwaresysteme
fonte
1

É 2017 e é possível segmentar opções de seleção específicas. No meu projeto, tenho uma tabela com uma classe = "variações" , e as opções de seleção estão na célula da tabela td = "value" , e o select tem um ID select # pa_color . O elemento option também possui uma opção de classe = "anexada" (entre outras tags de classe). Se um usuário estiver conectado como cliente atacadista, ele poderá ver todas as opções de cores. Mas os clientes de varejo não podem comprar duas opções de cores, então eu as desativei

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

Demorou um pouco de lógica, mas aqui está como eu direcionei as opções de seleção desabilitadas.

CSS

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

Com isso, minhas opções de cores são visíveis apenas para clientes atacadistas.

Mr. Garrison
fonte
1

Deixando aqui uma alternativa rápida, usando a alternância de classe em uma tabela. O comportamento é muito semelhante a um select, mas pode ser denominado com transição, filtros e cores, cada filho 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>

NVRM
fonte
1

Você pode usar estilos embutidos para adicionar estilo personalizado às <option>tags.

Por exemplo: <option style="font-weight:bold;color:#09C;">Option 1</option> Isso aplicará os estilos <option>somente a esse elemento específico .

Em seguida, você pode usar um pouco de magia javascript para aplicar os estilos inline a todos os <option>elementos em uma <select>tag da seguinte maneira:

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

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

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

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

Você também pode usar <option value="" disabled> <br> </option>para adicionar uma quebra de linha entre as opções.

Vinayak Mukherjee
fonte
0

Este elemento é renderizado pelo sistema operacional, não por HTML. Não pode ser estilizado via 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>

tente isso, pode ajudá-lo

[ https://codepen.io/venu9l/pen/jeNXzY][1]
Venkat G
fonte
0

Você pode adicionar uma classe e fornecer o peso da fonte: 700; em opção. Mas, usando isso, todo o texto ficará em negrito.

Anas Chaudhary
fonte
0

Definitivamente vai funcionar. A opção de seleção é renderizada pelo sistema operacional e não pelo html. É por isso que o estilo CSS não afeta, geralmente option{font-size : value ; background-color:colorCode; border-radius:value; }
isso funcionará, mas não podemos personalizar o preenchimento, a margem etc.

Abaixo do código, 100% trabalha para personalizar a tag de seleção retirada deste exemplo

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>

Harikrishnan k
fonte
Da avaliação: Olá, por favor, não responda apenas com o código-fonte. Tente fornecer uma boa descrição sobre como sua solução funciona. Veja: Como escrevo uma boa resposta? . Obrigado
quinta-feira,
este código é direto de w2schools w3schools.com/howto/tryit.asp?filename=tryhow_custom_select
devpato 15/04
0

Mesmo se não houver muitas propriedades a serem alteradas, você poderá obter o seguinte estilo apenas com css:

insira a descrição da imagem aqui

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;
    }
}
Anil Singh
fonte