how to remove blue highlight on hover in select, option inputs html for chrome

Question

Almost 2 hours I've been trying to find out how to remove the blue highlight on hover in select, option inputs in HTML with CSS for chrome. how do we do this? here is a photo for better understanding.

Photo that represents my problem

here is my code if anyone is interested in helping me particularly

index.html :

  <div style="margin-left:43px;" class="solutin_finder">
  <select id="genre" onChange="return selectOption();" class="price1">
    <option value="all" class="val">price range</option>
    <option value="35" class="val">0$-35$</option>
    <option value="36" class="val">36$ and over</option>
  </select>
  </div> 

Answer 1

Unfortunately there isn't yet an option for styling this or removing the default background-color in Chrome.

The best option currently is to create your own select box from a UL

Something like this might work:

<style type="text/css">
    .select ul li.option {
        background-color: #DEDEDE;
        box-shadow: 0px 1px 0 #DEDEDE, 0px -1px 0 #DEDEDE;
        -webkit-box-shadow: 0px 1px 0 #DEDEDE, 0px -1px 0 #DEDEDE;
        -moz-box-shadow: 0px 1px 0 #DEDEDE, 0px -1px 0 #DEDEDE;
    }

    .select ul li.option:hover {
        background-color: #B8B8B8;
    }

    .select ul li.option {
        z-index: 1;
        padding: 5px;
        list-style: none;
    }

    .select ul.closed li.option {
        display: none;
    }

    .select ul.closed li:first-child {
        display: block;
    }

    .select ul li {
        cursor: default;
    }
</style>

<div class="select">
    <ul style="width:150px;" id="selectbox" class="closed">
        <li values="1" class="option">Dropdown one</li>
        <li values="2" class="option">Dropdown two</li>
        <li values="3" class="option">Dropdown three</li>
    </ul>
</div>

<script>
    var s = document.getElementById("selectbox");
    selectbox.onclick = function () {
        selectbox.classList.toggle('closed');
    }
</script>

Answer 2

Solution works only in IE (checked 10 and 11)

`

<select class="form-control">
      <option>Option option option</option>
      <option>Option option option</option>
      <option>Option option option</option>
     </select>



      .form-control option:hover {
          background: pink;
        }

        ::selection, select:focus::-ms-value {
          background-color: deeppink;
          color: #000;
        }

        option:checked {
          background-color: deeppink;
          color: #000;
        }

        option:checked:hover, select:focus option:checked:hover {
          background-color: deeppink;
          color: #000;
        }

`

https://jsbin.com/mejivij/2/edit?html,css,js,output

Answer 3

Custom Select Box

var selectComboBox = document.getElementById("select_combo_box");
var selectedValue = "";    
            
selectComboBox.onclick = function() {
    var targetOption = event.target;
    if (targetOption.tagName != "LI") {
        selectComboBox.classList.toggle('closed');
    } else if (targetOption.getAttribute("value") == "0") {
        selectComboBox.classList.toggle('closed');
    } else {
        var select = targetOption.parentNode;
        var allOptions = select.children;
        var firstOption = allOptions[0];
        for (i in allOptions) {
            if (isNaN(i)) {
                break;
            }
            var option = allOptions[i];
            if (option) {
                if (option.classList.contains('selected')) {
                    option.classList.remove('selected');
                }
            }
        }
        selectedValue = targetOption.getAttribute("value");
        // targetOption.classList.add('selected');
        firstOption.children[0].innerHTML = targetOption.getInnerHTML();
        selectComboBox.classList.toggle('closed');
    }
};

function handleBodyClick() {
    var tagName = event.target.tagName;
    var parentTagName = event.target.parentNode.tagName;
    if (!!tagName) {
        if (tagName === 'LI' || tagName === 'UL' || parentTagName === 'LI') {
            return;
        }
    }
    if (!selectComboBox.classList.contains('closed')) {
        selectComboBox.classList.add('closed');
    }
}
window.addEventListener("wheel", function() {
    handleBodyClick();
});
window.addEventListener("keyup", function() {
    handleBodyClick();
});
window.addEventListener("keydown", function() {
    handleBodyClick();
});
window.addEventListener("click", function() {
    handleBodyClick();
});

.login-select ul li:first-child {
    background-color: #747474 !important;
    color: #D1D1D1;
    font-size: 13px;
    box-shadow: 0px 1px 0 #747474, 0px -1px 0 #747474 !important;
    -webkit-box-shadow: 0px 1px 0 #747474, 0px -1px 0 #747474 !important;
    -moz-box-shadow: 0px 1px 0 #747474, 0px -1px 0 #747474 !important;
}
.login-select ul li.option {
    background-color: #5D5D5D;
    color: #D1D1D1;
    font-size: 13px;
    box-shadow: 0px 1px 0 #5D5D5D, 0px -1px 0 #5D5D5D;
    -webkit-box-shadow: 0px 1px 0 #5D5D5D, 0px -1px 0 #5D5D5D;
    -moz-box-shadow: 0px 1px 0 #5D5D5D, 0px -1px 0 #5D5D5D;
}

.login-select ul li.option:hover {
    background-color: #747474;
}

.login-select ul li.option {
    z-index: 1;
    padding: 5px;
    list-style: none;
}

.login-select ul.closed li.option {
    display: none;
}

.login-select ul.closed li:first-child {
    display: block;
}

.login-select ul li {
    cursor: default;
}

.login-select ul li span {
    width: 10px;
    float: right;
    border-left: solid 1px;
    height: 14px;
    top: -24px;
    padding: 8px 5px;
    border-color: #5D5D5D;
}

<div class="login-select" style="width: 300px;">
    <ul style="width:100%; padding: 0px;" id="select_combo_box" class="closed">
        <li value="0" class="option"><div>Other Login Options</div><span class="glyphicon glyphicon-chevron-down"></span></li>
            <li value="1" class="option">Option 1</li>
            <li value="2" class="option">Option 2</li>
            <li value="3" class="option">Option 3</li>
            <li value="4" class="option">Option 4</li>
    </ul>
</div>