Question

近2个小时以来，我一直在尝试找出如何在带有CSS（用于chrome）的HTML中的select（选择）选项输入中，将鼠标悬停时的蓝色突出显示移除。我们如何做到这一点？这是一张更好理解的照片。

代表我的问题的照片

Photo that represents my problem

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

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

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

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

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

3 个答案: