how to change colour of blue highlight on select box dropdown?

Today, We want to share with you how to change colour of blue highlight on select box dropdown.In this post we will show you Dropdown Blue Hover Color, hear for Change color of nav link to blue on hover we will give you demo and example for implement.In this post, we will learn about jquery multiple selector with an example.

select option background-color change on hover

simple example you could change the background of select but you will not be able to change the highlight color (when you hover) by using CSS code!

box-shadow: 0 0 10px 100px #fff inset;

Change Select List Option background colour on hover

index.html

<select id="select">
    <option value="1">iphone</option>
    <option value="2">Mobile</option>
    <option value="3">LCD</option>
</select>

CSS Code

select.decorated option:hover {
    box-shadow: 0 0 10px 100px #1882A8 inset;
}

Add outline:none to your css:

.contactselect select
{
   background: url(Images/ArrowO.png) no-repeat right #000;
   width:268px;
   padding:5px;
   color:#F7921C;
   font-size:25px;
   font-family:dumbledor;
   line-height:1;
   border:solid 4px #F7921C;
   border-radius:10px;
   height:45px;
   -webkit-appearance:none;
    outline: none;
}

Changing <select> highlight color

CSS Code

select:hover { background-color: red; }

here change the default highlight color of drop down in html from blue to some other color for <select><option> tag

<div class="container">
  <select multiple="multiple" id="myList">
    <option value="1">Apple</option>
    <option value="2">Mango</option>
    <option value="3">Orange</option>
    <option value="4">Banana</option>
    <option value="5">Kiwi</option>
  </select>
</div>

js code

var colors = ["red", "blue", "green", "orange", "yellow"];

$(document).ready(function() {
  var checkList = [1, 3];
  $("#myList").select2({
  	width: "100%",
    templateSelection: function (data, container) {
      var selection = $('#myList').select2('data');
      var idx = selection.indexOf(data);
      console.log(">>Selection",data.text, data.idx, idx);
      data.idx = idx;
      
      $(container).css("background-color", colors[data.idx]);
      return data.text;
    },
  }).val(checkList).trigger("change");

  
  $("#myList").on("select2:select", function (evt) {
    var element = evt.params.data.element;
    var $element = $(element);

    $element.detach();
    $(this).append($element);
    $(this).trigger("change");
  });
  
})

CSS Code

.select2-selection__choice {
  color: white;
}

demo : https://jsfiddle.net/beaver71/phabypbt/

I hope you get an idea about change default select option ( color).
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.