Customize select option

Question

Customize select option

Navigation

#1 by (3 votes)
#2 by (1 votes)

2

Personal I'm trying to customize the options of the select however the colors of hover do not 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

asked by anonymous 13.11.2017 / 23:28

2 answers

1

It's very complicated and annoying to style the options. It can vary greatly from each browser, and every operating system (Windows and Mac makes a big difference, just like Opera and Chrome).

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

I do not advise you to try styling these elements if you want the same style in all browsers / computers.

You can change it with javascript if you are going to use it in your project. I indicate the chosen. It replaces the select with ul and lis, which can be stylized. This plugin is required by JQuery.

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

14.11.2017 / 00:01

Is it possible to edit a JSON file locally? Incorrect Printing of Values using Reduce

score 3 · Accepted Answer

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

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

This one seems to me to be quite interesting: Nice Select .

UPDATE:

See the plugin in action. You do not even have to download, just copy here. I put in the CSS comments where you can can change the colors of select and 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><selectclass="personalizar-select">
    <option>Mustard</option> 
    <option>Ketchup</option>
    <option>Relish</option>
</select>