如何在选择中删除悬停时的蓝色突出显示，选项输入 html for chrome

Question

近 2 小时以来，我一直在尝试找出如何在选择中删除悬停时的蓝色突出显示，在 HTML 中使用 CSS for chrome 进行选项输入。我们如何做到这一点？这是一张照片以便更好地理解。

代表我的问题的照片

如果有人有兴趣特别帮助我，这是我的代码

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

不幸的是，目前还没有用于设置样式或删除 Chrome 中的默认背景颜色的选项。

目前最好的选择是从 UL 创建您自己的选择框

这样的事情可能会奏效：

<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

解决方案仅适用于 IE（选中 10 和 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

自定义选择框

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>

Answer 4

Select / Option 元素由操作系统呈现，而不是 HTML。您无法更改这些元素的样式。 但是您可以使用 CSS 和 JavaScript 创建自定义选择框，检查下面的 URL

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