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

    iphone
    Mobile
    LCD

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

 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 

tag

  
    Apple
    Mango
    Orange
    Banana
    Kiwi
  

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.

Related posts:

1. How to change a select’s options based on another dropdown using javascript?
2. How to get selected value of dropdown in JavaScript/jQuery on change?
3. jquery set select option value
4. how to select category and subcategory dropdown in php MySQL?