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

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

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

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

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

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

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

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

还有Doctype.com上的这个。

当前回答

＜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

其他回答

自定义选择CSS样式

在Internet Explorer（10和11）、Edge、Firefox和Chrome中测试

select：：-ms扩展{显示：无；}选择{显示：内联块；框大小调整：边框框；衬垫：0.5em 2em 0.5em 0.5em；边框：1px实心#eee；字体：inherit；线条高度：inherit；-webkit外观：无；-moz外观：无；-ms外观：无；外观：无；背景重复：无重复；背景图像：线性梯度（45deg，透明50%，currentColor 50%），线性梯度（135deg，当前Color 50%，透明50%）；背景位置：右15px顶部1em，右10px顶部1nm；背景尺寸：5px 5px，5px 5px；}<select name=“”><option value=“”>Lorem</option><option value=“”>Lorem Ipsum</option></选择><select name=“”已禁用><option value=“”>禁用</option></选择><select name=“”style=“color:red；”><option value=“”>颜色</选项><option value=“”>Lorem Ipsum</option></选择>

2019-06-12 11:20:38

对您可以通过标记名来设置任何HTML元素的样式，如下所示：

select {
  font-weight: bold;
}

当然，您也可以像其他任何元素一样使用CSS类来设置其样式：

<select class="important">
  <option>Important Option</option>
  <option>Another Important Option</option>
</select>

<style type="text/css">
  .important {
    font-weight: bold;
  }
</style>

2009-12-13 03:36:41

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

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

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

2009-12-13 03:43:55

示例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

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

推荐文章

最新文章

标签