是否有CSS唯一的方式来设置<select>下拉列表的样式?

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

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

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

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

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

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

还有Doctype.com上的这个。


当前回答

这里有一个基于我在这次讨论中最喜欢的想法的解决方案。这允许直接设置<select>元素的样式,而无需任何附加标记。

它可以使用Internet Explorer 10(及更高版本),并为Internet Explorer 8/9提供安全回退。这些浏览器需要注意的一点是,背景图像必须定位并足够小,以便隐藏在本机扩展控件后面。

HTML

<select name='options'>
  <option value='option-1'>Option 1</option>
  <option value='option-2'>Option 2</option>
  <option value='option-3'>Option 3</option>
</select>

SCSS

body {
  padding: 4em 40%;
  text-align: center;
}

select {
  $bg-color: lightcyan;
  $text-color: black;
  appearance: none; // Using -prefix-free http://leaverou.github.io/prefixfree/
  background: {
    color: $bg-color;
    image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1255/caret--down-15.png");
    position: right;
    repeat: no-repeat;
  }
  border: {
    color: mix($bg-color, black, 80%);
    radius: .2em;
    style: solid;
    width: 1px;
    right-color: mix($bg-color, black, 60%);
    bottom-color: mix($bg-color, black, 60%);
  }
  color: $text-color;
  padding: .33em .5em;
  width: 100%;
}

// Removes default arrow for Internet Explorer 10 (and later)
// Internet Explorer 8/9 gets the default arrow which covers the caret
// image as long as the caret image is smaller than and positioned
// behind the default arrow
select::-ms-expand {
    display: none;
}

代码笔

http://codepen.io/ralgh/pen/gpgbGx

其他回答

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

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

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

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

Danield回答中的第三种方法可以改进,以处理悬停效果和其他鼠标事件。只需确保“button”元素正好位于标记中的select元素之后。然后使用+CSS选择器将其作为目标:

HTML格式:

<select class="select-input">...</select>
<div class="select-button"></div>

CSS:

.select-input:hover+.select-button {
    <Hover styles here>
}

然而,当悬停在select元素上的任何位置时,这将显示悬停效果,而不仅仅是“按钮”上。

我将此方法与Angular结合使用(因为我的项目恰好是Angular应用程序),以覆盖整个select元素,并让Angular在“button”-元素中显示所选选项的文本。在这种情况下,将鼠标悬停在所选对象上的任何位置时,悬停效果都是非常合理的。

如果没有JavaScript,它就无法工作,所以如果您想这样做,并且您的站点必须在没有JavaScript的情况下工作,那么您应该确保您的脚本添加了增强所需的元素和类。这样,没有JavaScript的浏览器只会得到一个正常的、未样式的select,而不是一个无法正确更新的样式徽章。

自定义选择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></选择>

在设置选择下拉列表样式时,我注意到的最大的不一致是Safari和Google Chrome渲染(Firefox可以通过CSS完全自定义)。在互联网的黑暗深处进行了一些搜索后,我发现了以下内容,这几乎完全解决了我对WebKit的疑虑:

Safari和Google Chrome修复程序:

select {
  -webkit-appearance: none;
}

但是,这会删除下拉箭头。您可以使用带有背景、负边距或绝对位于select下拉列表上方的附近div添加下拉箭头。

*CSS属性:-webkit外观中提供了更多信息和其他变量。