使用 CSS 设置选择标签的样式 [重复]

Posted 2023-03-05

【中文标题】使用 CSS 设置选择标签的样式 [重复]

【英文标题】：Styling select tags using CSS [duplicate]

【发布时间】：2020-12-18 13:48:48

【问题描述】：

我想知道如何为下面这张图片设置选择标签的样式

我能够自定义下拉菜单（代码如下）：

select 
  padding: 1em;
  width: 130%;
  border-radius: .2em;
  border: 1px solid #acacac;
  color: #181820;
  
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  
  background: url('https://cdn1.iconfinder.com/data/icons/arrows-vol-1-4/24/dropdown_arrow-512.png');
  background-repeat: no-repeat;
  background-size: 15px 15px;
  background-position: right;
  background-origin: content-box;

【问题讨论】：

在这里您可以找到解决方案 - ***.com/questions/1895476/…

这能回答你的问题吗？ How to style the option of an html "select" element?

@NikhilSingh 它只说 <select> 而不是 ` 我一直在寻找如何设置 option 的样式到目前为止 select 只能在 CSS 中设置样式

@sagar 谢谢，我发现它也不能在 mozilla 上使用 CSS 设置样式。

【参考方案1】：

你真的不能。从 mdn 检查这个 sn-p：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select

众所周知，<select> 元素很难使用 CSS 高效地设置样式。您可以像任何元素一样影响某些方面——例如，操作盒子模型、显示的字体等，并且您可以使用外观属性来删除默认的系统外观。

但是，这些属性不会在浏览器之间产生一致的结果，并且很难将不同类型的表单元素在列中相互排列。 <select> 元素的内部结构复杂，难以控制。如果您想获得完全控制权，您应该考虑使用具有良好功能的库来设置表单小部件的样式，或者尝试使用非语义元素、javascript 和 WAI-ARIA 来滚动您自己的下拉菜单以提供语义。

确实请查看高级指南，了解您可以做些什么来设置它们的样式。一个很好的例子来说明选项的样式有多糟糕：

您会注意到选项不会继承父级上设置的字体。您也无法始终如一地设置间距和颜色等内容。例如，Firefox 在 <option> 元素上设置时将应用颜色和背景颜色，Chrome 不会。他们都不会应用任何间距