CSS 如何更改选择框下拉列表中蓝色突出显示的颜色

How to change colour of blue highlight on select box dropdown

提问by Jonathan Lyon

How do I change the blue highlight on this dropdown please?

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

link to select box demo

链接到选择框演示

I'd like to change the highlight color to gray if this is possible.

如果可能的话，我想将高亮颜色更改为灰色。

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>

回答by Ilia Rostovtsev

Yes, you could change the background of selectbut you will not be able to change the highlight color (when you hover) by using CSS!

是的，您可以更改背景，select但您将无法使用 CSS 更改高亮颜色（当您悬停时）！

You have few options:

你有几个选择：

1. Is to convert selectinto ul, likind of select and do anything you want with this.

2. Use libraries like Choosen, Select2or jQuery Form Styler. These allow you to style in much more broad and cross-browser way.

1. 是转换select成ul, li一种选择并用它做任何你想做的事情。

2. 使用像Choosen、Select2或jQuery Form Styler这样的库。这些允许您以更广泛和跨浏览器的方式设计样式。

回答by Nick

I believe you are looking for the outlineCSS property (in conjunction with active and hover psuedo attributes):

我相信您正在寻找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
}

Full details of outline, outline-color, outline-style, and outline-width https://developer.mozilla.org/en-US/docs/Web/CSS/outline

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

回答by Jason Wofford

Just found this whilst looking for a solution. I've only tested it FF 32.0.3

刚刚在寻找解决方案时发现了这一点。我只测试过它 FF 32.0.3

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

回答by tercou1

try this.. I know it's an old post but it might help somebody

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

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;
    }

回答by Lekha B

When we click on an "input" element, it gets "focused" on. Removing the blue highlighter for this "focus" action is as simple as below. To give it gray color, you could define a gray border.

当我们单击“输入”元素时，它会“聚焦”。删除此“焦点”操作的蓝色荧光笔非常简单，如下所示。要赋予它灰色，您可以定义一个灰色边框。

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

回答by Guestation

To both style the hover color and avoid the OS default color in Firefox, you need to add a box-shadow to both the select option andselect option:hover declarations, setting the color of the box-shadow on "select option" to the menu background color.

要在 Firefox 中设置悬停颜色的样式并避免使用操作系统默认颜色，您需要向 select option和select option:hover 声明中添加一个 box-shadow ，将“select option”上的 box-shadow 的颜色设置为菜单背景颜色。

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

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

回答by user1830605

This works for firefox and chrome, falls back gracefully to the system color in IE. Just be sure to set the title property to the content of the option. It allows you to set the background and foreground colors.

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

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

回答by dimmat

Add this in your CSS code and change the red background-color with a color of your choice:

将其添加到您的 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;}

回答by ahmed

i just found this site that give a cool themes for the select box http://gregfranko.com/jquery.selectBoxIt.js/

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

and you can try this themes if your problem with the overall look blue- yellow- grey

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