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


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;
   border:solid 4px #F7921C;
    outline: none;



js code

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

$(document).ready(function() {
  var checkList = [1, 3];
  	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;

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


CSS Code

.select2-selection__choice {
  color: white;

demo :

I hope you get an idea about change default select option ( color).
I would like to have feedback on my 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.

Leave a Comment