如何更改下拉框选择框中蓝色高亮的颜色

Question

如何更改下拉框选择框中蓝色高亮的颜色

73

我该如何更改这个下拉菜单中的蓝色高亮？

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

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>

- Jonathan Lyon

可能是重复问题：https://dev59.com/L3I-5IYBdhLWcg3wy76n#1667105 - Guillaume Poussel

1

可能是更改选择列表选项悬停时的背景颜色的重复问题。 - George

1

我认为你做不到。你可以设置单个选项的背景，但不能设置高亮。您可以考虑使用jQuery插件，例如http://dev7studios.com/dropit/。 - Yuriy Galanter

请参考此链接：https://dev59.com/_FnUa4cB1Zd3GeqPe-Um - sbsekar

2

Suresh 的建议无效。 - Mike Kormendy

9个回答

13

我相信您正在寻找与激活和悬停伪属性配合使用的outline CSS 属性：

/* 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
}

outline、outline-color、outline-style、outline-width 的详细信息 https://developer.mozilla.org/en-US/docs/Web/CSS/outline

- Nick B

16

我认为这是背景突出显示而不是重点轮廓。 - James Westgate

2

这完全没有回答问题 - OP想要用另一种颜色替换浏览器默认的蓝色高亮。 - Luke

11

在寻找解决方案的过程中，我发现了这个。我只测试过它在FF 32.0.3上是否有效。

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

- Jason Wofford

4

select option:hover{ box-shadow: 0 0 10px 10px #e1358f inset; } 这段代码有效，但只在火狐浏览器中，并且只有当鼠标停留在元素上时才生效。如果在下拉框仍然打开的情况下移开鼠标，它会立即变成蓝色。 - Anima-t3d

1

@CPHPython 或许可以使用类似 select2 的东西。 - Anima-t3d

@Anima-t3d 谢谢，我熟悉select2，但我只是想限制插件的使用数量。 - CPHPython

原生下拉选择框的样式处理非常棘手，我认为使用插件是最常见的应用场景之一。 - Anima-t3d

8

试试这个...虽然这是一篇旧帖，但它可能会对某些人有所帮助。

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

- tercou1

7

它只会对选中选项的背景进行样式设置，在悬停时不起作用。但无论如何，它还是很有用的。 - Olga

3

当我们点击"input"元素时，它会被"聚焦"。以下是去除该"聚焦"动作的蓝色高亮的简单方法。要使其变为灰色，可以定义一个灰色边框。

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

- Lekha B

是的，当选择框聚焦时，它会改变边框颜色。但是，阴影框也应该被覆盖并设置为 'box-shadow: 0 0 2px 灰色;' 以完全删除蓝色颜色。 - JCdotNET

是的，我也在收听这个议题的广播。 - Jovylle

无法在悬停选项上工作，而是将下拉菜单的整个背景更改为此背景颜色。所问的问题是如何更改默认的蓝色高亮颜色。 - JWP

2

这适用于 Firefox 和 Chrome 浏览器，在 IE 浏览器中会自动回退到系统颜色。只需确保将 title 属性设置为选项的内容即可。它允许您设置背景和前景颜色。

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

- user1830605

1

这个方法很不正规，但它确实做到了我想要的。谢谢 :) （顺便说一下，它也适用于 Electron） - ShaneTheKing

1

在Chrome 63或Firefox 57中无法正常工作... 伪元素使用两个冒号吗？ - Alexander

2

为了同时设置菜单项的悬停颜色并避免Firefox中使用操作系统默认颜色，您需要在选择选项和选择选项:hover声明中都添加box-shadow，并将"select option"盒子阴影的颜色设置为菜单背景颜色。

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

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

- Guestation

10

这不会消除在将光标移动到下拉选项上方时出现的蓝色悬停颜色。 - klokop

这是唯一对我有效的解决方案。虽然像@klokop提到的那样，它并不能摆脱鼠标悬停时的蓝色。 - Shmuel Kamensky

-3

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

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

- ahmed

-4

在你的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;}

- dimmat

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ilia · Accepted Answer

是的，你可以改变select的背景颜色，但是你无法使用CSS更改鼠标悬停时的高亮颜色！

你有几个选择：

将select转换为ul, li类型的选择器，并对其进行任何想要的样式设置。
使用像Choosen、Select2或jQuery Form Styler 这样的库。这些库允许您以更广泛和跨浏览器的方式进行样式设置。