3

Pessoal estou tentando personalizar os options do select porém as cores do hover não mudam sempre ficam azul. Segue o código

.personalizar-select{
    border: 1px solid red;
}
.personalizar-option{
    border: 1px solid blue;
    background: black;
    color: #fff;
}  
.personalizar-option:hover{
    background: #fff;
    color: black;
}
<select class="personalizar-select">
    <option class="personalizar-option">Mustard</option> 
    <option class="personalizar-option">Ketchup</option>
    <option class="personalizar-option">Relish</option>
</select>

2 Respostas 2

5

Estilizar option via código é muito limitado. Você só conseguirá este efeito no Internet Explorer e à partir da versão 10. Navegadores como o Chrome, Firefox e Opera não permitem essa estilização.

Se isso for muito importante para você, você teria que usar algum plugin que substitui o select por um dropdown todo estilizado.

Este aqui me parece ser bastante interessante: Nice Select.

ATUALIZAÇÃO:

Veja o plugin em ação. Você nem precisa baixar, basta copiar aqui. Coloquei no CSS os comentários onde você pode pode alterar as cores do select e dos options:

/*  jQuery Nice Select - v1.0
    https://github.com/hernansartorio/jquery-nice-select
    Made by Hernán Sartorio  */
!function(e){e.fn.niceSelect=function(t){function s(t){t.after(e("<div></div>").addClass("nice-select").addClass(t.attr("class")||"").addClass(t.attr("disabled")?"disabled":"").attr("tabindex",t.attr("disabled")?null:"0").html('<span class="current"></span><ul class="list"></ul>'));var s=t.next(),n=t.find("option"),i=t.find("option:selected");s.find(".current").html(i.data("display")||i.text()),n.each(function(t){var n=e(this),i=n.data("display");s.find("ul").append(e("<li></li>").attr("data-value",n.val()).attr("data-display",i||null).addClass("option"+(n.is(":selected")?" selected":"")+(n.is(":disabled")?" disabled":"")).html(n.text()))})}if("string"==typeof t)return"update"==t?this.each(function(){var t=e(this),n=e(this).next(".nice-select"),i=n.hasClass("open");n.length&&(n.remove(),s(t),i&&t.next().trigger("click"))}):"destroy"==t?(this.each(function(){var t=e(this),s=e(this).next(".nice-select");s.length&&(s.remove(),t.css("display",""))}),0==e(".nice-select").length&&e(document).off(".nice_select")):console.log('Method "'+t+'" does not exist.'),this;this.hide(),this.each(function(){var t=e(this);t.next().hasClass("nice-select")||s(t)}),e(document).off(".nice_select"),e(document).on("click.nice_select",".nice-select",function(t){var s=e(this);e(".nice-select").not(s).removeClass("open"),s.toggleClass("open"),s.hasClass("open")?(s.find(".option"),s.find(".focus").removeClass("focus"),s.find(".selected").addClass("focus")):s.focus()}),e(document).on("click.nice_select",function(t){0===e(t.target).closest(".nice-select").length&&e(".nice-select").removeClass("open").find(".option")}),e(document).on("click.nice_select",".nice-select .option:not(.disabled)",function(t){var s=e(this),n=s.closest(".nice-select");n.find(".selected").removeClass("selected"),s.addClass("selected");var i=s.data("display")||s.text();n.find(".current").text(i),n.prev("select").val(s.data("value")).trigger("change")}),e(document).on("keydown.nice_select",".nice-select",function(t){var s=e(this),n=e(s.find(".focus")||s.find(".list .option.selected"));if(32==t.keyCode||13==t.keyCode)return s.hasClass("open")?n.trigger("click"):s.trigger("click"),!1;if(40==t.keyCode){if(s.hasClass("open")){var i=n.nextAll(".option:not(.disabled)").first();i.length>0&&(s.find(".focus").removeClass("focus"),i.addClass("focus"))}else s.trigger("click");return!1}if(38==t.keyCode){if(s.hasClass("open")){var l=n.prevAll(".option:not(.disabled)").first();l.length>0&&(s.find(".focus").removeClass("focus"),l.addClass("focus"))}else s.trigger("click");return!1}if(27==t.keyCode)s.hasClass("open")&&s.trigger("click");else if(9==t.keyCode&&s.hasClass("open"))return!1});var n=document.createElement("a").style;return n.cssText="pointer-events:auto","auto"!==n.pointerEvents&&e("html").addClass("no-csspointerevents"),this}}(jQuery);

$(document).ready(function() {
  $('.personalizar-select').niceSelect();
});
.nice-select {
   height: 22px; /* altura do select */
   line-height: 22px; /* este valor deve ser o mesmo acima */
   border: solid 1px red; /* cor da borda do select*/
   -webkit-tap-highlight-color: transparent;
   background-color: #fff;
   box-sizing: border-box;
   clear: both;
   cursor: pointer;
   display: block;
   float: left;
   font-family: inherit;
   font-size: 14px;
   font-weight: normal;
   outline: none;
   padding-left: 18px;
   padding-right: 30px;
   position: relative;
   text-align: left !important;
   -webkit-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   white-space: nowrap;
   width: auto;
}
.nice-select:hover {
   border-color: orange; /* cor da borda do select ao passar o mouse */
}
.nice-select:active, .nice-select.open, .nice-select:focus {
   border-color: blue; /* cor da borda quando o select estiver aberto */
}
.nice-select:after {
   border-bottom: 2px solid #000;
   border-right: 2px solid #000;
   content: '';
   display: block;
   height: 5px;
   margin-top: -4px;
   pointer-events: none;
   position: absolute;
   right: 12px;
   top: 50%;
   -webkit-transform-origin: 66% 66%;
   -ms-transform-origin: 66% 66%;
   transform-origin: 66% 66%;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
   -webkit-transition: all 0.15s ease-in-out;
   transition: all 0.15s ease-in-out;
   width: 5px;
}
.nice-select.open:after {
   -webkit-transform: rotate(-135deg);
   -ms-transform: rotate(-135deg);
   transform: rotate(-135deg);
}
.nice-select.open .list {
   opacity: 1;
   pointer-events: auto;
   -webkit-transform: scale(1) translateY(0);
   -ms-transform: scale(1) translateY(0);
   transform: scale(1) translateY(0);
}
.nice-select.disabled {
   border-color: #000;
   color: #999;
   pointer-events: none;
}
.nice-select.disabled:after {
   border-color: #000;
}
.nice-select.wide {
   width: 100%;
}
.nice-select.wide .list {
   left: 0 !important;
   right: 0 !important;
}
.nice-select.right {
   float: right;
}
.nice-select.right .list {
   left: auto;
   right: 0;
}
.nice-select.small {
   font-size: 12px;
   height: 36px;
   line-height: 34px;
}
.nice-select.small:after {
   height: 4px;
   width: 4px;
}
.nice-select.small .option {
   line-height: 34px;
   min-height: 34px;
}
.nice-select .list {
   background-color: #fff;
   box-shadow: 0 0 0 1px rgba(68, 68, 68, 1); /* cor da borda dos options em RGB */
   box-sizing: border-box;
   margin-top: 4px;
   opacity: 0;
   overflow: hidden;
   padding: 0;
   pointer-events: none;
   position: absolute;
   top: 100%;
   left: 0;
   -webkit-transform-origin: 50% 0;
   -ms-transform-origin: 50% 0;
   transform-origin: 50% 0;
   -webkit-transform: scale(0.75) translateY(-21px);
   -ms-transform: scale(0.75) translateY(-21px);
   transform: scale(0.75) translateY(-21px);
   -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
   transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
   z-index: 9;
}
.nice-select .list:hover .option:not(:hover) {
   background-color: transparent !important;
}
.nice-select .option {
   cursor: pointer;
   font-weight: 400;
   line-height: 22px; /* altura das options */
   min-height: 22px; /* este valor deve ser o mesmo do acima */
   list-style: none;
   outline: none;
   padding-left: 18px;
   padding-right: 29px;
   text-align: left;
   -webkit-transition: all 0.2s;
   transition: all 0.2s;
}
.nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus {
   background-color: green; /* corde fundo da option selecionada e ao passar o mouse */
   color: red; /* cor da option ao passar o mouse e do item selecionado*/
}
.nice-select .option.selected {
   font-weight: bold;
}
.nice-select .option.disabled {
   background-color: transparent;
   color: #999;
   cursor: default;
}
.no-csspointerevents .nice-select .list {
   display: none;
}
.no-csspointerevents .nice-select.open .list {
   display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="personalizar-select">
    <option>Mustard</option> 
    <option>Ketchup</option>
    <option>Relish</option>
</select>

5
  • Pois é o cliente quer exatamente personalizado, vou ver esse plugin, obrigado! Commented 13/11/2017 às 22:58
  • 2
    @JulianoSouza Atualizei a resposta com o código completo do plugin, com o jQuery e o CSS dele comentado. Basta copiar e colar.
    – Sam
    Commented 13/11/2017 às 23:56
  • Obrigado! Passei o dia procurando isso, obrigado! Commented 14/11/2017 às 0:10
  • Você acha que é possível manipular as cores dos options através de um for ? Estou tentando efetuar um processo parecido com um select porem precisava apresentar o background de cada option de acordo com uma cor .É um for de cores vindo do banco assim de acordo com a cor (EX : #C6FF11) ele troca o background do option. Digo isso por que editando in-line o stylo não é carregado Commented 4/05/2020 às 16:20
  • @LucasAlves Olá Lucas. É possível sim alterar as cores. Vc pode colocar inline style="background: red;" ou fazer um for e alterar a cor de acordo com o value, o index ou o texto do option.
    – Sam
    Commented 4/05/2020 às 17:26
1

É muito complicado e chato estilizar os options. Pode variar muito de cada navegador, e cada sistema operacional (Windows e Mac tem grande diferença, assim como Opera e Chrome).

A única coisa que você conseguiria por exemplo é aumentar o tamanho da fonte.

Não aconselho você tentar estilizar esses elementos se você quer o mesmo estilo em todos os navegadores/computadores.

É possível alterar com javascript se você for utilizar no seu projeto. Eu indico o chosen. Ele substitui o select por ul e lis, que podem ser estilizados. Este plugin é necessário JQuery.

E se você quiser estilizar a setinha do select, aqui ensina como estilizar.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .