如何仅使用CSS设置＜select＞下拉列表的样式？

是否有CSS唯一的方式来设置＜select＞下拉列表的样式？

我需要尽可能人性化地设置＜select＞表单的样式，而不需要任何JavaScript。在CSS中，我可以使用哪些财产来执行此操作？

此代码需要与所有主要浏览器兼容：

Internet Explorer 6、7和8Firefox浏览器游猎

我知道我可以用JavaScript实现：示例。

我说的不是简单的造型。我想知道，我们只能用CSS做什么。

我在Stack Overflow上发现了类似的问题。

还有Doctype.com上的这个。

当前回答

从InternetExplorer10开始，您可以使用：：-ms-expand伪元素选择器来样式和隐藏下拉箭头元素。

select::-ms-expand {
    display:none;
    /* or visibility: hidden; to keep it's space/hitbox */
}

其余的样式应该与其他浏览器类似。

下面是Danield的jsfiddle的一个基本分支，它应用了对IE10的支持

2013-12-09 21:50:16

其他回答

＜select＞标签可以通过CSS进行样式设置，就像在浏览器中呈现的HTML页面上的任何其他HTML元素一样。下面是一个（过于简单）的示例，它将在页面上放置一个select元素，并将选项的文本呈现为蓝色。

示例HTML文件（选择Example.HTML）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Select Styling</title>
  <link href="selectExample.css" rel="stylesheet">
</head>
<body>
<select id="styledSelect" class="blueText">
  <option value="apple">Apple</option>
  <option value="orange">Orange</option>
  <option value="cherry">Cherry</option>
</select>
</body>
</html>

示例CSS文件（selectExample.CSS）：

/* All select elements on page */
select {
  position: relative;
}

/* Style by class. Effects the text of the contained options. */
.blueText {
  color: #0000FF;
}

/* Style by id. Effects position of the select drop down. */
#styledSelect {
  left: 100px;
}

2009-12-13 03:48:31

使用clip属性裁剪选择元素的边框和箭头，然后将自己的替换样式添加到包装中：

<!DOCTYPE html><html><head><style>选择｛位置：绝对；剪辑：矩形（2px 49px 19px 2px）；z索引：2；｝body＞span｛display：块；位置：相对；宽度：64px；高度：21px；边框：2px纯绿色；背景：url(http://www.stackoverflow.com/favicon.ico)右1px不重复；}</style></head><span><选择><option value=“”>Alpha</option><option value=“”>Beta版</option><option value=“”>Charlie</option></选择></span></html>

使用不透明度为零的第二次选择使按钮可单击：

<!DOCTYPE html><html><head><style>#实{位置：绝对；剪辑：矩形（2px 51px 19px 2px）；z索引：2；}#假｛位置：绝对；不透明度：0；｝body>span｛display：块；位置：相对；宽度：64px；高度：21px；背景：url(http://www.stackoverflow.com/favicon.ico)右1px不重复；}</style></head><span><select id=“real”><option value=“”>Alpha</option><option value=“”>Beta版</option><option value=“”>Charlie</option></选择><select id=“fake”><option value=“”>Alpha</option><option value=“”>Beta版</option><option value=“”>Charlie</option></选择></span></html>

Webkit和其他浏览器的坐标不同，但@media查询可以涵盖这一点。

工具书类

Dojo FX测试：dojox.FX.ext-Dojo.complexCSS掩码：使用rect函数测试剪辑属性，并自动将值剪辑到边框框

2012-01-07 01:33:08

这是可能的，但不幸的是，根据开发人员的要求，大多数情况下都是基于WebKit的浏览器。以下是通过内置开发人员工具检查器从Chrome选项面板收集的CSS样式示例，该检查器经过改进以匹配大多数现代浏览器中当前支持的CSS财产：

select {
  -webkit-appearance: button;
  -moz-appearance: button;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-padding-end: 20px;
  -moz-padding-end: 20px;
  -webkit-padding-start: 2px;
  -moz-padding-start: 2px;
  background-color: #F07575; /* Fallback color if gradients are not supported */
  background-image: url(../images/select-arrow.png), -webkit-linear-gradient(top, #E5E5E5, #F4F4F4); /* For Chrome and Safari */
  background-image: url(../images/select-arrow.png), -moz-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Firefox (3.6 to 15) */
  background-image: url(../images/select-arrow.png), -ms-linear-gradient(top, #E5E5E5, #F4F4F4); /* For pre-releases of Internet Explorer  10*/
  background-image: url(../images/select-arrow.png), -o-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Opera (11.1 to 12.0) */
  background-image: url(../images/select-arrow.png), linear-gradient(to bottom, #E5E5E5, #F4F4F4); /* Standard syntax; must be last */
  background-position: center right;
  background-repeat: no-repeat;
  border: 1px solid #AAA;
  border-radius: 2px;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  color: #555;
  font-size: inherit;
  margin: 0;
  overflow: hidden;
  padding-top: 2px;
  padding-bottom: 2px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

当您在基于WebKit的浏览器中的任何页面上运行此代码时，它应该更改选择框的外观，删除标准OS箭头并添加PNG箭头，在标签前后放置一些间距，几乎是您想要的任何内容。

最重要的部分是外观属性，它改变了元素的行为方式。

它在几乎所有基于WebKit的浏览器中都能完美工作，包括移动浏览器，尽管Gecko似乎不像WebKit那样支持外观。

2011-04-27 19:05:27

在现代浏览器中，在CSS中设置＜select＞的样式相对轻松。外观方面：唯一棘手的部分是替换箭头（如果你想要的话）。下面是一个使用内联data:URI和纯文本SVG的解决方案：

选择{-moz外观：无；-webkit外观：无；外观：无；背景重复：无重复；背景尺寸：0.5em自动；背景位置：右0.25em中心；右侧填充：1em；backgroundimage:url（“data:image/svg+xml；charset=utf-8\<svg xmlns='http://www.w3.org/2000/svg'viewBox='0 0 60 40'>\<多边形点=',0 60,0 30,40'style='fill:black；'/>\</svg>“）；}<选择><option>选项1</option><option>选项2</option></选择><select style=“font-size:2rem；”><option>选项1</option><option>选项2</option></选择>

其余的样式（边框、填充、颜色等）相当简单。

这适用于我刚刚尝试过的所有浏览器（Firefox 50、Chrome 55、Edge 38和Safari 10）。关于Firefox的一个注意事项是，如果你想在数据URI中使用#字符（例如，fill:#000），你需要转义它（fill:%23000）。

2017-01-13 19:03:59

select元素及其下拉功能很难设置样式。

Chris Heilmann的select元素的风格属性证实了Ryan Dohery对第一个答案的评论：

“select元素是操作系统，而不是浏览器chrome。因此风格不可靠，尝试也不一定有意义无论如何"

2009-12-13 03:43:55

如何仅使用CSS设置＜select＞下拉列表的样式？

推荐文章

最新文章

标签