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

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

2015-05-29 13:50:37

其他回答

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

它使用分层旋转的背景层来“剪切”下拉箭头，因为伪元素不适用于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><选项></选项></选择>

2014-07-10 08:35:59

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

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

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

2009-12-13 03:43:55

本机解决方案

下面是一个简单的HTML/CSS示例：https://jsfiddle.net/dkellner/e1jdspvb/

诀窍：由于某种原因，当你给select标记一个size属性时，它会突然理解CSS。通常，此属性用于创建始终可见的固定高度列表，但作为一个副作用，您现在可以对其进行样式设置。因此，我们所做的只是给它一个大小，然后实现显示/隐藏机制，以返回下拉列表的感觉。

简约版，不像示例那样时尚，但更容易理解：

<style>

    .stylish > span {position:relative;}
    .stylish select {position:absolute;left:0px;transform:scaleY(0);transform-origin:top center;}
    .stylish.dropped-down select {transform:scaleY(1);}

</style>
...
<div class="stylish">
    <label> Choose your superhero: </label>
    <span>
        <input   onclick  = "this.closest('div').classList.toggle('dropped-down');"><br>
        <select  onclick  = "this.closest('div').classList.remove('dropped-down');"
                 onchange = "this.closest('div').querySelector('input').value=this.value;"
                 size=9
        >
            <optgroup label="Fantasy"></optgroup>

            <option value="gandalf">  Gandalf       </option>
            <option value="harry">    Harry Potter  </option>
            <option value="jon">      Jon Snow      </option>

            ...                
            
        </select>
    </span>
</div>

附加说明

这实际上实现了一个可编辑的下拉列表；使用只读以避免编辑＜optgroup＞标记是空的（不是围绕选项标记），这样更具风格

2016-06-12 11:11:29

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

工作示例：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></选择>

2015-11-02 12:54:43