是否有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>

我有这个确切的问题,除了我不能使用图像,而且不受浏览器支持的限制。这应该是“符合规范”,幸运的话,最终开始在各地工作。

它使用分层旋转的背景层来“剪切”下拉箭头,因为伪元素不适用于select元素。

编辑:在这个更新版本中,我使用了CSS变量和一个小型主题系统。

:根目录{--半径:2px;--baseFg:灰色;--baseBg:白色;--重音Fg:#006fc2;--重音Bg:#bae1ff;}.主题粉色{--半径:2米;--baseFg:#c70062;--baseBg:#ffe3f1;--重音Fg:#c70062;--重音Bg:#ffaad4;}.主题结构{--半径:0;--baseFg:白色;--baseBg:黑色;--accentFg:黑色;--accentBg:橙色;}选择{字体:400 12px/1.3无衬线;-webkit外观:无;外观:无;颜色:var(--baseFg);border:1px实体变量(--baseFg);线高:1;大纲:0;衬垫:0.65em 2.5em 0.55em 0.75em;边界半径:var(--radius);背景色:var(--baseBg);背景图像:线性梯度(var(--baseFg)、var(--baseFg)),线性梯度(-135度,透明50%,var(--accentBg)50%),线性梯度(-225度,透明50%,var(--accentBg)50%),线性梯度(var(--accentBg)42%,var(--accentFg)42%);背景重复:无重复,无重复,不重复,无反复;背景大小:1px 100%,20px 22px,20px 22 px,20px 100%;背景位置:右20px中心,右下,右下和右下;}选择:悬停{背景图像:线性梯度(var(--accentFg),线性梯度(-135度,透明50%,var(--accentFg)50%),线性梯度(-225度,透明50%,var(--accentFg)50%),线性梯度(var(--accentFg)42%,var(--accentBg)42%);}选择:活动{背景图像:线性梯度(var(--accentFg),线性梯度(-135度,透明50%,var(--accentFg)50%),线性梯度(-225度,透明50%,var(--accentFg)50%),线性梯度(var(--accentFg)42%,var(--accentBg)42%);颜色:var(--accentBg);边框颜色:var(--accentFg);背景色:var(--accentFg);}<选择><option>这么多选项</option><选项></选项></选择><select class=“主题粉色”><option>这么多选项</option><选项></选项></选择><select class=“主题构建”><option>这么多选项</option><选项></选项></选择>

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

这是一个适用于所有现代浏览器的版本。关键是使用外观:无,这将删除默认格式。由于所有的格式都不存在了,您必须重新添加箭头,以在视觉上区分选择和输入。

工作示例:https://jsfiddle.net/gs2q1c7p/

选择:不([多个]){-webkit外观:无;-moz外观:无;背景位置:右50%;背景重复:无重复;背景图像:url(数据:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRR vYmU6bnM6bWV0YS8IIHg6eG1wdGs9IkFkb2JlIFhNUCBDB3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbeG1wPSJodHwOi8 vbnMuYWRvYmUuY29tL3hhcC8xLjAvIB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1spnM 6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9ZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtC5paWQ6NDZFNDEWNjlGNzFEMTFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9固有C5kaWQ6NDZFND EWNkFGNzFEMTFTFMkJEQ 0VDRTM10RCMz MyMkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZ WY6ZG9jdW1lbnJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAMAzNENEOH+do8AAAAAASUVORK5CYII=);衬垫:.5cm;右侧填充:1.5em}#我的选择{边框半径:0}<select id=“mySelect”><option>选项1</option><option>选项2</option></选择>

这里有一个基于我在这次讨论中最喜欢的想法的解决方案。这允许直接设置<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