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

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

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

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

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

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

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

还有Doctype.com上的这个。


当前回答

你肯定应该像CSS中的样式选择、optgroup和选项那样做。在许多方面,背景色和颜色只是您通常需要的样式选项,而不是整个选择。

其他回答

您还可以向下拉列表中添加悬停样式。

选择{position:relative;float:left;width:21.4%;height:34px;background:#f9f9e0;border:1px solid#41533f;padding:0px 10px 0px 10px;color:#41533f;margin:-10px 0px 0px 20px;backbackground:透明;字体大小:12px;-webkit外观:无;-moz外观:无(https://alt-fit.com/images/global/select-button.png)100%/15%无重复选择:悬停{background:url(https://alt-fit.com/images/global/select-button.png)100%/15%无重复#fff;}<html><head></head><body><select name=“type”class=“select”><option style=“color:#41533f;”value=“select option”>选择选项</option><option value=“选项1”>选项1</option><option value=“option 2”>选项2</option><option value=“选项3”>选项3</option></选择></body></html>

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

Safari和Google Chrome修复程序:

select {
  -webkit-appearance: none;
}

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

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

对您可以通过标记名来设置任何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>

不建议编辑此元素,但如果您想尝试,它与任何其他HTML元素一样。

编辑示例:

/* Edit select */
select {
    /* CSS style here */
}

/* Edit option */
option {
    /* CSS style here */
}

/* Edit selected option */
/* element  attr    attr value */
option[selected="selected"] {
    /* CSS style here */
}
<select>
    <option >Something #1</option>
    <option selected="selected">Something #2</option>
    <option >Something #3</option>
</select>

使用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函数测试剪辑属性,并自动将值剪辑到边框框