如何在没有样式化所有其他选项的情况下使用 CSS 样式选择选项？

Posted 2023-05-08

【中文标题】如何在没有样式化所有其他选项的情况下使用 CSS 样式选择选项？

【英文标题】：How style selected option with CSS without styling all the other options?

【发布时间】：2012-08-26 13:28:18

【问题描述】：

如何将 CSS 背景颜色仅应用于所选选项？如果我将一个类应用于选择对象，它会设置所有选项的样式。如果我将所需的类应用于选项，我可以在扩展“选择”框时，可以看到所有选项的样式精细。但是，当“选择”框折叠时，所选选项的样式消失。我在最新版本的 Chrome 和 Firefox 中观察到了这种行为。

这是一些超级基本的示例代码。如果没有 jQuery，所选选项始终显示为无样式。使用 jQuery，一旦选择了“已修改”选项，所有选项的样式都将被设置为“已修改”。我一直无法找到解决这个问题的方法...有什么想法吗？

我不想更改选项的样式。只有在选择任何给定选项时才能看到其样式，而不会覆盖其他选项的样式。

<style>
  select.modified,
  option.modified
    background-color: red;
  
</style>

<select id="example">
  <option value="bird" class="modified">bird</option>
  <option value="cat">cat</option>
  <option value="dog" class="modified">dog</option>
</select>

<script>
  $('#example').on('change',function()
    $(this).prop('class',$(this).find('option:selected').prop('class'));  
  );
</script>

【问题讨论】：

你的意思是option.modified？

浏览器的特点是难以为复选框、单选按钮和多选/选择等元素设置样式。通常，解决方法是隐藏实际的表单元素，并在其旁边放置一个可样式化的交互式div。

在某些浏览器（即 chrome + linux）中存在错误，这使得 <option> 无法从 <select> 继承背景，因此您应该始终（在设置选择背景时）为所有选项设置它.

【参考方案1】：

试试这个：

$('#example').on('change',function()
   $(':selected', this).addClass('modified').siblings().removeClass('modified')
);

option.modified
   background-color: red;

FIDDLE

【讨论】：

啊，.siblings()很好用。以前我需要它的时候从来没有打动过我！ +1！

我不想更改各个选项的样式。这是在呈现选择框时由其他东西设置的。我只希望能够在选择选项时看到它的样式，而不是从本质上覆盖所有其他选项的样式。

【参考方案2】：

select option.modified  color: red; /*something*/ 

---

$('#example').on('change', function()
    $(this).find('option').removeClass('modified');
    $(this).find('option:selected').addClass('modified');
);

【讨论】：

就像我上面说的，我不想改变选项的样式。我只是希望能够在选择一个选项时看到它的样式，显然 Chrome 和 Firefox 不这样做。

@DouglasMauch：所以使用不同的class 作为默认的option 样式，并仅将.modified 用于它应该做的事情。

【参考方案3】：

您的事件在整个selected#example 列表中，因此它的所有选项自然会获得背景，因为它们位于选择中。尝试将您的事件绑定到选项标签。

另外，您的第二条规则将颜色应用于所有选项标签和虚构的modified 标签。通过将 , 替换为 .，您将按照您的意思行事 - 只有带有 modified 类的选项。

【讨论】：

逗号是错字，应该是 CSS 选择器中的 option.modifed

【参考方案4】：

好吧，在阅读了 cmets 之后，我认为您真的想要这些方面的东西。

$('#example').on('change', function() 
    console.log(this.options[this.selectedIndex].style);
);​

或者没有 jQuery

document.getElementById('example').onchange = function() 
    console.log(this.options[this.selectedIndex].style);
;

这将为您提供所有当前规则的CSSStyleDeclaration。请记住，十六进制值以 rgb 形式返回。

演示：http://jsfiddle.net/rlemon/Qu5Xa/1/

或者另一种选择是返回 className....

document.getElementById('example').onchange = function() 
    console.log(this.options[this.selectedIndex].className);
;

或 jQuery

$('#example').on('change', function() 
    $(this.options[this.selectedIndex]).attr('class'); // however I would still not even bother wrapping this up in jQuery and just use this.options[this.selectedIndex].className
);​

【参考方案5】：

我找到了解决此问题的最佳方法。基本上我必须从选定的焦点选项中删除任何类，并将其添加回模糊的那些类。这似乎可以很好地解决问题。

<script>
  $('#example').on('change',function()
    // do whatever needs to be done
    $(this).blur();
  ).on('focus',function()
    $(this).removeClass($(this).find('option:selected').prop('class'));
  ).on('blur',function()
    $(this).addClass($(this).find('option:selected').prop('class'));
  );
</script>