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

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

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

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

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

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

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

还有Doctype.com上的这个。


当前回答

本机解决方案

下面是一个简单的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>标记是空的(不是围绕选项标记),这样更具风格

其他回答

label {
    position: relative;
    display: inline-block;
}
select {
    display: inline-block;
    padding: 4px 3px 5px 5px;
    width: 150px;
    outline: none;
    color: black;
    border: 1px solid #C8BFC4;
    border-radius: 4px;
    box-shadow: inset 1px 1px 2px #ddd8dc;
    background-color: lightblue;
}

这对选定的元素使用了背景色,我删除了图像。。

博客文章HowtoCSS表单下拉样式没有JavaScript适合我,但在Opera中失败了:

选择{边框:0无;颜色:#FFFFFF;背景:透明;字体大小:20px;字号:粗体;填充:2px 10px;宽度:378px;*宽度:350px;*背景:#58B14C;}#主要选举{溢出:隐藏;宽度:350px;-moz边框半径:9px 9px 9px 9px;-webkit边框半径:9px 9px 9px 9px;边框半径:9px 9px 9px 9px;方框阴影:1px 1px 11px#3330033;background:url(“arrow.gif”)无重复滚动319px 5px#58B14C;}<div id=“mainselection”><选择><option>选择选项</option><option>选项1</option><option>选项2</option></选择></div>

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

工作示例: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>标签可以通过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;
}

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