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

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

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

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

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

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

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

还有Doctype.com上的这个。


当前回答

我用Bootstrap找到了你的案子。这是最简单的解决方案:

选择表单控件{-moz外观:无;-webkit外观:无;外观:无;背景位置:右中心;背景重复:无重复;背景尺寸:1ex;背景原点:内容框;背景图像:url(“数据:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbbNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9y9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4Wxu czpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1UcyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmicCiAgIHht bG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnMiIKICAgdmlld0JveD0iMCAwIDM1Ljk3MDk4MyAyMy4wOTE1MTgiCiAgIGhlaWdodD0iNi41MTY5Mzk2bW0iCiAgIHdpZHRoPSIxMC4NTE4MTFtbSI+CiAgPGRlZnMKICAgICBpZD0ZGVmczQiIC8+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhNyI+CiAgICA8cmRmRmJERj4K ICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0GogICAgICgIDxKYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAg ICAgICAc8ZGM6dGl0bGU+PC9kYzp0aXRsZT4KICAgPC9jYzpXb3JrGogICAgPC9 yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGcKICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjAyLj AxNDUxLC00MDcuMTIyMjUpIgogICAgIGlkPSJsYXllcjEiPgogICAgPHRleHQKICAgICAgIGLKPSJ0ZXh0MzMzNiIKICAgICAgIHk9IjYyOS41MDUwNyIKICAgIHg9IjI5MS40Mjg1NiIKICAgICagIHN0eWxlPSJmb250LXeWxlOm5vcm1hbDtmb250LXdlaWdodDpub3JtYWw7Zm9udC1zaXplOjQwcHg7bGluZS1oZlnaHQ6MTI1JTtmb250LWZhbWlseTpzYW5zLXNlcmlmO2xldHRlc1zcGFjaW5nOjBweDt3b3JkLXNwYWpbmc6MHB4O2ZpbGw6IzAwMDAwMDtmaWxsLW9wYWpdHk6MTtzdHJva2U6bm9uZTtzdHJVa2Utd2lkdGg6MXB4O30cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO30cm9 rZS1vcGFjaXR5OjEiCiAgICAgICB4bWw6c3BhY2U9InByZXNlcnZlIj48dHNwYW4KICAgICAgT0iNjI5LjUwNTA3GogICAgICB4PSIyOTEuNDI4NTYiCiAgICAgIGlkPSJ0c3BhbjMzMzgiPjwvdHNwYW4+PC90ZXh0GogICAg PGcKICAgICAgIglkPSJ0ZXh0MzM0MCIKICAgICAgIHN0eWxlPSJmb250LXN0eWXLOm5vcm1hbDtmb250LXZhcmlhbnQ6bm9ybWFsO2ZvbnQtd2VpZ2h0Om5vcm2hbDtmb2 50LXN0cmV0Y2g6bm9yWFsO 2ZvbnQtc2l6ZTo0MHB4O2xpbmUtaGVpZ2h0OjEyNSU7Zm9udC1mYW1pbHk6Rm9udEF3ZXNvbWU7LWlua3NjYXBlLWZvbnqtc3blY2lmaWNhdGlvbjpGb250QXdlc29tZTtsZXR0ZXItc3BhY2luZzowcHg7d29yZC1zcGFjaW5nOjBweDtmaWxsOiMwMDAwMDA7Zmlsbc1vcGFjaXR5OjE7c3 Ryb2tlOm5vbmU7c3 Ryb2tl LXdpZHRojFweDtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJVa2Utb3BhY2l0eToxIj4KICAgICAgPHBhdGgKICAgICAgICAgaWQ9InBhdGgzMzQ1IggICAgICBzdHls ZT0iZmlsbDojMzMzMz MzO2ZpbGwtb3BhY2l0eToxIggICAgICBkPSJtIDizNy41NjY5Niw0MTMuMjU1MDcgYyAwLjU1ODA0LC0wLjU1OD A0IDAuNTU4MDQsLTEuNDczMjIgMCwtMi4wMzEynSBsIC0zLjcwNTM1LC0zLjY4MzA0IGMgLTauNTU4MDQsLTauNTU4MDQgLTEuNDuwOSwtMC41NTgwNCAtMi4wMDg5MywwIEwgMjIwLDQxOS4zOTM0NiAyMDguMTQ3MzIsNDA3LjU0MDc4IGMgLTAUNTU4MDDMsLTauntU4MDDQgLTeuNDuwodksLTauNTu4MDQgLTEuMDA4OTMsMCBsiC0zLjcw NTM1LDMuNjgzMDQgYyAtMC41NTgwNCwwLjU1ODD AzIC0wLjU1ODA0LDEuNDczMjEgMCwyLjAzMTI1IGwgMTYuNTYyNSwxNi41NDAxNyBjIDAuNTU4MMSC41NTWGNCAxLjQ1MDg5LDAuNTU4MDQgMi4wMDg5MiwwIGwgMTYUNTYyNSSwtMTYuNTQwMTcgeiIgLz4KICAgIDwZz4KICA8L2c+Cjwvc3ZnPgo=“);}<link href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css“rel=”stylesheet“/><section class=“container”><form class=“form horizontal”><select class=“表单控件”><option>一个</option><option>两个</option></选择></form></section>

注意:base64在SVG中是一个V字形。

其他回答

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

从InternetExplorer10开始,您可以使用::-ms-expand伪元素选择器来样式和隐藏下拉箭头元素。

select::-ms-expand {
    display:none;
    /* or visibility: hidden; to keep it's space/hitbox */
}

其余的样式应该与其他浏览器类似。

下面是Danield的jsfiddle的一个基本分支,它应用了对IE10的支持

我用Bootstrap找到了你的案子。这是最简单的解决方案:

选择表单控件{-moz外观:无;-webkit外观:无;外观:无;背景位置:右中心;背景重复:无重复;背景尺寸:1ex;背景原点:内容框;背景图像:url(“数据:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbbNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9y9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4Wxu czpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1UcyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmicCiAgIHht bG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnMiIKICAgdmlld0JveD0iMCAwIDM1Ljk3MDk4MyAyMy4wOTE1MTgiCiAgIGhlaWdodD0iNi41MTY5Mzk2bW0iCiAgIHdpZHRoPSIxMC4NTE4MTFtbSI+CiAgPGRlZnMKICAgICBpZD0ZGVmczQiIC8+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhNyI+CiAgICA8cmRmRmJERj4K ICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0GogICAgICgIDxKYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAg ICAgICAc8ZGM6dGl0bGU+PC9kYzp0aXRsZT4KICAgPC9jYzpXb3JrGogICAgPC9 yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGcKICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjAyLj AxNDUxLC00MDcuMTIyMjUpIgogICAgIGlkPSJsYXllcjEiPgogICAgPHRleHQKICAgICAgIGLKPSJ0ZXh0MzMzNiIKICAgICAgIHk9IjYyOS41MDUwNyIKICAgIHg9IjI5MS40Mjg1NiIKICAgICagIHN0eWxlPSJmb250LXeWxlOm5vcm1hbDtmb250LXdlaWdodDpub3JtYWw7Zm9udC1zaXplOjQwcHg7bGluZS1oZlnaHQ6MTI1JTtmb250LWZhbWlseTpzYW5zLXNlcmlmO2xldHRlc1zcGFjaW5nOjBweDt3b3JkLXNwYWpbmc6MHB4O2ZpbGw6IzAwMDAwMDtmaWxsLW9wYWpdHk6MTtzdHJva2U6bm9uZTtzdHJVa2Utd2lkdGg6MXB4O30cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO30cm9 rZS1vcGFjaXR5OjEiCiAgICAgICB4bWw6c3BhY2U9InByZXNlcnZlIj48dHNwYW4KICAgICAgT0iNjI5LjUwNTA3GogICAgICB4PSIyOTEuNDI4NTYiCiAgICAgIGlkPSJ0c3BhbjMzMzgiPjwvdHNwYW4+PC90ZXh0GogICAg PGcKICAgICAgIglkPSJ0ZXh0MzM0MCIKICAgICAgIHN0eWxlPSJmb250LXN0eWXLOm5vcm1hbDtmb250LXZhcmlhbnQ6bm9ybWFsO2ZvbnQtd2VpZ2h0Om5vcm2hbDtmb2 50LXN0cmV0Y2g6bm9yWFsO 2ZvbnQtc2l6ZTo0MHB4O2xpbmUtaGVpZ2h0OjEyNSU7Zm9udC1mYW1pbHk6Rm9udEF3ZXNvbWU7LWlua3NjYXBlLWZvbnqtc3blY2lmaWNhdGlvbjpGb250QXdlc29tZTtsZXR0ZXItc3BhY2luZzowcHg7d29yZC1zcGFjaW5nOjBweDtmaWxsOiMwMDAwMDA7Zmlsbc1vcGFjaXR5OjE7c3 Ryb2tlOm5vbmU7c3 Ryb2tl LXdpZHRojFweDtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJVa2Utb3BhY2l0eToxIj4KICAgICAgPHBhdGgKICAgICAgICAgaWQ9InBhdGgzMzQ1IggICAgICBzdHls ZT0iZmlsbDojMzMzMz MzO2ZpbGwtb3BhY2l0eToxIggICAgICBkPSJtIDizNy41NjY5Niw0MTMuMjU1MDcgYyAwLjU1ODA0LC0wLjU1OD A0IDAuNTU4MDQsLTEuNDczMjIgMCwtMi4wMzEynSBsIC0zLjcwNTM1LC0zLjY4MzA0IGMgLTauNTU4MDQsLTauNTU4MDQgLTEuNDuwOSwtMC41NTgwNCAtMi4wMDg5MywwIEwgMjIwLDQxOS4zOTM0NiAyMDguMTQ3MzIsNDA3LjU0MDc4IGMgLTAUNTU4MDDMsLTauntU4MDDQgLTeuNDuwodksLTauNTu4MDQgLTEuMDA4OTMsMCBsiC0zLjcw NTM1LDMuNjgzMDQgYyAtMC41NTgwNCwwLjU1ODD AzIC0wLjU1ODA0LDEuNDczMjEgMCwyLjAzMTI1IGwgMTYuNTYyNSwxNi41NDAxNyBjIDAuNTU4MMSC41NTWGNCAxLjQ1MDg5LDAuNTU4MDQgMi4wMDg5MiwwIGwgMTYUNTYyNSSwtMTYuNTQwMTcgeiIgLz4KICAgIDwZz4KICA8L2c+Cjwvc3ZnPgo=“);}<link href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css“rel=”stylesheet“/><section class=“container”><form class=“form horizontal”><select class=“表单控件”><option>一个</option><option>两个</option></选择></form></section>

注意:base64在SVG中是一个V字形。

不建议编辑此元素,但如果您想尝试,它与任何其他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>

本机解决方案

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