css - 如何在选择框下拉菜单上更改蓝色突出显示的颜色

Question

请问如何更改此下拉列表中的蓝色突出显示？

如果可能的话，我想将突出显示颜色更改为灰色。

select {
  border: 0;
  color: #EEE;
  background: transparent;
  font-size: 20px;
  font-weight: bold;
  padding: 2px 10px;
  width: 378px;
  *width: 350px;
  *background: #58B14C;
  -webkit-appearance: none;
}

#mainselection {
  overflow: hidden;
  width: 350px;
  -moz-border-radius: 9px 9px 9px 9px;
  -webkit-border-radius: 9px 9px 9px 9px;
  border-radius: 9px 9px 9px 9px;
  box-shadow: 1px 1px 11px #330033;
  background: url("http://www.danielneumann.com/wp-content/uploads/2011/01/arrow.gif") no-repeat scroll 319px 5px #58B14C;
}

<div id="mainselection">
  <select>
    <option>Select an Option</option>
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
</div>

score 28 · Accepted Answer

是的，您可以更改背景，select但无法使用 CSS 更改突出显示颜色（悬停时）！

你有几个选择：

是转换select成ul, li一种选择并用它做任何你想做的事情。
使用Choosen、Select2或jQuery Form Styler等库。这些允许您以更广泛和跨浏览器的方式进行样式设置。

score 13 · Accepted Answer

我相信您正在寻找outlineCSS 属性（结合 active 和 hover psuedo 属性）：

/* turn it off completely */
select:active, select:hover {
  outline: none
}

/* make it red instead (with with same width and style) */
select:active, select:hover {
  outline-color: red
}

轮廓、轮廓颜色、轮廓样式和轮廓宽度的完整详细信息 https://developer.mozilla.org/en-US/docs/Web/CSS/outline

score 10 · Accepted Answer

只是在寻找解决方案时发现了这个。我只测试过 FF 32.0.3

box-shadow: 0 0 10px 100px #fff inset;

score 8 · Accepted Answer

试试这个..我知道这是一个旧帖子，但它可能会对某人有所帮助

select option:hover,
    select option:focus,
    select option:active {
        background: linear-gradient(#000000, #000000);
        background-color: #000000 !important; /* for IE */
        color: #ffed00 !important;
    }

    select option:checked {
        background: linear-gradient(#d6d6d6, #d6d6d6);
        background-color: #d6d6d6 !important; /* for IE */
        color: #000000 !important;
    }

score 3 · Accepted Answer

当我们点击一个“输入”元素时，它会被“聚焦”在上面。为这个“焦点”动作移除蓝色荧光笔很简单，如下所示。为了给它灰色，你可以定义一个灰色边框。

select:focus{
    border-color: gray;
    outline:none;
}

score 2 · Accepted Answer

这适用于 firefox 和 chrome，优雅地回退到 IE 中的系统颜色。只需确保将 title 属性设置为选项的内容即可。它允许您设置背景和前景色。

select option:checked:after {
    content: attr(title);
    background: #666;
    color: #fff;
    position: absolute;
    width: 100%;
    left: 0;
    border: none;
}

score 2 · Accepted Answer

要同时设置悬停颜色的样式并避免 Firefox 中的操作系统默认颜色，您需要为选择选项和选择选项添加一个框阴影：悬停声明，将“选择选项”上的框阴影的颜色设置为菜单背景颜色。

select option {
  background: #f00; 
  color: #fff; 
  box-shadow: inset 20px 20px #f00
} 

select option:hover {
  color: #000; 
  box-shadow: inset 20px 20px #00f;
}

score 0 · Accepted Answer

尝试删除按钮中 :focus 类的框阴影，所附图像显示了它在引导程序中的情况。

.dropdown .btn:focus{
    box-shadow: none;
}

score -2 · Accepted Answer

我刚刚发现这个网站为选择框提供了一个很酷的主题 http://gregfranko.com/jquery.selectBoxIt.js/

如果您对整体外观蓝色-黄色-灰色有问题，您可以尝试这个主题

score -3 · Accepted Answer

将此添加到您的 CSS 代码中，并使用您选择的颜色更改红色背景颜色：

.dropdown-menu>.active>a {color:black; background-color:red;}
.dropdown-menu>.active>a:focus {color:black; background-color:red;}
.dropdown-menu>.active>a:hover {color:black; background-color:red;}

css - 如何在选择框下拉菜单上更改蓝色突出显示的颜色

10 回答 10

Related

Reference