Customize option of select

Asked

Viewed 7,004 times

2

People I’m trying to personalize options of select but the colors of Hover don’t change always turn blue. Follow the code

.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>

html css

2 answers

5


Stylize option via code is very limited. You will only get this effect in Internet Explorer and from version 10. Browsers like Chrome, Firefox and Opera do not allow this styling.

If this is very important to you, you would have to use some plugin that replaces the select by a dropdown all stylized.

This one looks pretty interesting: Nice Select.

UPDATING:

See the plugin in action. You don’t even need to download, just copy here. I put in the CSS the comments where you can change the colors of the select and of 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>

  • Because it is the client wants exactly customized, I will see this plugin, thank you!

  • 2

    @Julianosouza I updated the reply with the full code of the plugin, with jQuery and its CSS commented. Just copy and paste.

  • Thank you! I spent the day looking for this, thank you!

  • Do you think it is possible to manipulate options colors through a for ? I’m trying to make a process similar to a select but needed to present the background of each option according to a color. It is a color for coming from the bank so according to the color (EX : #C6FF11) it changes the background of the option. I say this because editing online Stylo is not loaded

  • @Lucasalves Hello Lucas. It is possible to change the colors. You can put inline style="background: red;" or do a for and change the color according to value, index or option text.

1

It’s very complicated and boring styling options. It can vary a lot from each browser, and each operating system (Windows and Mac has big difference, just like Opera and Chrome).

The only thing you could achieve for example is to increase the font size.

I don’t advise you to try styling these elements if you want the same style on all browsers/computers.

It is possible to change with javascript if you are going to use it in your project. I recommend Chosen. It replaces select by ul and lis, which can be stylized. This plugin requires Jquery.

And if you want to style the select arrow, here teaches how to stylize.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.