如何修改select的子元素option的默认样式

Posted 2023-04-27

<div class="selectbox">
      <select>
            <option>默认值</option>
            <option>选项之</option>
      </select>
</div>

css代码：

.selectbox width: 200px; display: inline-block; overflow-x: hidden; height: 28px; line-height: 28px; font-size: 0;  background:#fff url(images/selectbg.png) right center no-repeat; border: 1px solid #dcdbdb; vertical-align: middle;
.selectbox selectcursor: pointer; padding: 0 8px; height: 28px; line-height: 28px; font-size: 12px; width:118%; padding-right: 18%; background:none; border: none;
.selectbox select option padding:5px;

1..selectbox select  有个padding-right:18%； 和宽度100%+18% 的意思是故意超出selectbox的。

2.这个超出部分刚好能把后面的默认下拉按键隐藏掉，同时设置.selectbox的背景为下拉小按钮，居右边垂直居中。

3.之所以用百分比(18%)，没有用固定值设置超出，是因为外层的selectbox只要定宽就不必考虑内层的select的宽度和padding样式值，很利于设置不同的宽度值，这里只需要设置selectbox的宽度，内层的select控件就自动获得宽度并超出。

最终效果如下：

selectbg.png背景图片如下：

参考技术A css设置下拉列表(select)样式首先我们需要获取到这个元素的id或者是class，然后在通过给这个元素设置它的width和height等等一些样式，具体的看代码: .div1 width:600px; height:200px; font-size:13px; .div select width:200px; .div sel本回答被提问者采纳

基于选定的 <option> 样式 <select> 元素

【中文标题】基于选定的 <option> 样式 <select> 元素

【英文标题】：Style <select> element based on selected <option>

【发布时间】：2013-04-27 00:16:21

【问题描述】：

是否可以根据仅使用 CSS 选择的 option 来设置 select 元素的样式？我知道现有的JavaScript solutions。

我尝试为选项元素本身设置样式，但这只会为选项列表中的选项元素提供样式，而不是为所选元素提供样式。

select[name="qa_contact"] option[value="3"] 
    background: orange;

http://jsfiddle.net/Aprillion/xSbhQ/

如果 CSS 3 无法实现，CSS 4 subject selector 会在未来提供帮助 - 还是这将成为 CSS 的禁果？

【问题讨论】：

我可以对您选择的遮阳篷提出异议，敬请期待。这很“hacky”

@Justin - 如果有更好的答案，我会更改已接受的答案。但目前对我来说已经足够了。

查看我的 anwser 并让我知道它是否真的回答了您的问题，哈哈。

主题选择器和:has() pseudo-class在任何浏览器中仍然不受支持:(

【参考方案1】：

不可能？拿着我的啤酒。

我们在这里所做的只是让选择元素知道当前的选项。 CSS 可以处理其余部分。 （不用担心 js one-liner，它没有依赖关系，一切都是开箱即用的。）稍加努力，您还可以将 <select> 标记初始化为其原始值；不包括在下面，但它非常简单，只需在编写标记时给它一个“数据选择”属性。

    <select onchange=" this.dataset.chosen = this.value; ">
        ...
        ...
    </select>

现在您可以轻松定位和设置样式：

select[data-chosen='opt3']  
    border: 2px solid red;

参见CodePen。

旁注：“选择”不是魔术词，只是一个描述性名称 - 它可能是“圣诞老人”。这样看起来也会更好。

【讨论】：

谢谢！正在网上搜索类似的东西。这完全成功了！！！！你的 CodePen 也很棒 :) 你太棒了！

@Ken 谢谢 :) 很高兴帮助一位程序员！

最优雅的解决方案:)

拿着我的啤酒，圣诞老人，让我的一天两次

这个解决方案的一个问题是，如果用户离开然后返回历史记录，选择会被保留，但数据属性不会。 :(

【参考方案2】：

纯 CSS 方法：-

如果你想在使用:valid选择器选择空值时应用样式，你可以设置它的样式，如下代码所示

如果所选值为空，则显示为红色

select > option 
  color: black;
  font-weight:initial;

select option[value=""] 
  color: red;
  font-weight:bold;

select[required]:invalid 
  color: red;
  font-weight:bold;

<select required name="fontSize">
<option value="">Please select</option>
<option value="9">9 px</option>
<option value="10">10 px</option>
<option value="11">11 px</option>
<option value="12">12 px</option>
<option value="13">13 px</option>
<option value="14">14 px</option>
<option value="15">15 px</option>
<option value="16">16 px</option>
</select>
<select required name="fontColor">
<option value="">Please select</option>
<option value="red" selected>Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>

【讨论】：

这并不能准确回答问题。当表单尝试使用上述必需的控件并选择了占位符 (value="") 选项时，问题变得很明显——它不会提交，因为根据 HTML 5，placeholder label option 在选择时不会使控件有效。实际上，您只是根据有效性设置 select 元素的样式，即使它对您有用并且是一个有用的答案，但应该明确指出这并不能真正回答原始问题。

@amn 最初的问题是“根据什么选项设置选择元素的样式”，而不是关于表单是否提交。他已经明确指出这是一个 CSS 问题。

您一定误解了这个问题——它要求“基于选择的选项”。相反，您的答案解释的是如何根据其有效性设置 select 元素的样式（使用 :valid 伪类）。根据有效性为控件设置样式与根据选择的 what 选项设置控件样式不同。这是否是一个 CSS 问题无关紧要，也不是我专门争论的问题。

@amn 是的。在 CSS 中，这是基于值可以设置的最大样式。因为select 元素甚至不支持模式。这就是我指出最大 CSS 样式的原因

【参考方案3】：

很遗憾，是的 - 目前只有 CSS 无法实现这一点。正如this question 的答案和 cmets 中所提到的，目前没有办法让 parent 元素接收基于其 children 的样式。

为了做您想做的事，您基本上必须检测选择了哪个子代 (<option>)，然后相应地设置父代的样式。

但是，您可以通过一个非常简单的 jQuery 调用来完成此操作，如下所示：

HTML

<select>
  <option value="foo">Foo!</option>
  <option value="bar">Bar!</option>
</select>

jQuery

var $select = $('select');
$select.each(function() 
    $(this).addClass($(this).children(':selected').val());
).on('change', function(ev) 
    $(this).attr('class', '').addClass($(this).children(':selected').val());
);

CSS

select, option  background: #fff; 
select.foo, option[value="foo"]  background: red; 
select.bar, option[value="bar"]  background: green; 

这是working jsFiddle。

回到关于选择器的未来的问题。 是的 - “主题”选择器旨在完全按照您提到的那样做。如果/当它们真正在现代浏览器中上线时，您可以将上述代码修改为：

select  background: #fff; 
!select > option[value="foo"]:checked  background: red; 
!select > option[value="bar"]:checked  background: green; 

作为旁注，关于 ! 应该放在主题之前还是之后仍然存在争议。这是基于!something 的编程标准，意思是“不是东西”。因此，基于主题的 CSS 实际上可能会变成这样：

select  background: #fff; 
select! > option[value="foo"]:checked  background: red; 
select! > option[value="bar"]:checked  background: green; 

【讨论】：

对于 jQuery 部分 - 它应该检查预选选项以及 onchange 事件

我已经在 jsFiddle 中修改了这个select.foo, option[value="foo"] background: red; 以在 value="" 用这个select.foo, option[value=""] background: red; 更改背景颜色，但它不起作用。值为空时如何更改背景颜色？

@VansFannel - 这就是第一行的用途：select, option background: red; 将设置框的默认背景颜色（通常映射到没有值的选项）。

我不喜欢这个变体，因为它（错过）使用类名。如果选项与现有的类名具有相同的名称怎么办？我建议将选定的值写入数据属性中，我猜现在所有浏览器都支持该属性，并且很容易为它编写选择器。所以“数据”层和“样式”层是分开的。

是的——今天可能会更好。然而，答案来自 2013 年。

【参考方案4】：

这就是我发现的可能。最大的问题是，在您选择了一个元素后，背景颜色并没有改变，因为选择的元素实际上并没有被重绘（在 IE 中似乎更普遍——看图）。因此，即使您选择了不同的选项，当您再次单击选择元素时，该选项也不会在列表中突出显示。

要修复 IE 中的重绘问题，需要将 font-size 更改最小量，+-.1。另一件事似乎没有很好地记录，伪类:checked 确实也适用于选择控件。

fiddler 显示添加的 CSS 使其成为可能。

我只是在 Chrome 和 IE9 上短暂使用过它，仅供参考。

编辑：显然，您需要将 [value="x"] 设置为您想要的值以突出显示特定选项。

【讨论】：

这对 IE 和 Chrome 很有用。根本不适用于 Firefox 和 Opera。

@deathApril 我没有看过opera，但它在Firefox 中不起作用实际上是Firefox 中的一个错误。如果您查看应用的 CSS，它实际上就在那里，哈哈。在这种情况下需要 Javascript。

感谢错误链接，如果它自 2001 年以来仍未修复，我不相信会很快在 Firefox 中工作:(

更新：不再适用于 Chrome 48.0 和 IE 11 - 的背景完全不受 的 css 影响

@Aprillion 我刚刚在Chrome 48.0.2564.109 m 和IE 11.0.9600.17239 上尝试了提琴手，它仍然有效。你能确认你没有其他 CSS 或 JS 影响选择元素吗？