时间戳

首页 > 解决方案 > 使用 CSS 设置选择标签的样式

html - 使用 CSS 设置选择标签的样式

问题描述

我想知道如何为下面这张图片设置选择标签的样式 在此处输入图像描述

我能够自定义下拉列表（下面的代码）：

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

标签： htmlcss

解决方案

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

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

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

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

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

推荐阅读