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

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

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

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

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

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

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

还有Doctype.com上的这个。


当前回答

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

其他回答

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

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

本机解决方案

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

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

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

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