CODEWITHSUNDEEP
htmlcssgoogle-chrome
quebecdoodle
quebecdoodle

Reputation: 93

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

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

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>

Upvotes: 8

Views: 21203

Answers (4)

Anil Agrawal
Anil Agrawal

Reputation: 3026

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>

Upvotes: 1

beauvoir
beauvoir

Reputation: 67

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

Upvotes: 1

Jesse James Burton
Jesse James Burton

Reputation: 316

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>

Upvotes: 3

id3vz
id3vz

Reputation: 480

Select / Option elements are rendered by the OS, not HTML. You cannot change the style of these elements. But you can create custom select boxes with CSS and JavaScript check the URL below

https://www.w3schools.com/howto/howto_custom_select.asp

Upvotes: -1

Related Questions