时间戳

首页 > 解决方案 > 如何在选择中删除悬停时的蓝色突出显示，选项输入 html for chrome

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

问题描述

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

代表我的问题的照片

代表我的问题的照片

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

索引.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>

标签： htmlcssgoogle-chrome

解决方案

不幸的是，目前还没有设置样式或删除 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>

推荐阅读