自定义选择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元素一样。

编辑示例：

/* 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>

Danield回答中的第三种方法可以改进，以处理悬停效果和其他鼠标事件。只需确保“button”元素正好位于标记中的select元素之后。然后使用+CSS选择器将其作为目标：

HTML格式：

<select class="select-input">...</select>
<div class="select-button"></div>

CSS:

.select-input:hover+.select-button {
    <Hover styles here>
}

然而，当悬停在select元素上的任何位置时，这将显示悬停效果，而不仅仅是“按钮”上。

我将此方法与Angular结合使用（因为我的项目恰好是Angular应用程序），以覆盖整个select元素，并让Angular在“button”-元素中显示所选选项的文本。在这种情况下，将鼠标悬停在所选对象上的任何位置时，悬停效果都是非常合理的。

如果没有JavaScript，它就无法工作，所以如果您想这样做，并且您的站点必须在没有JavaScript的情况下工作，那么您应该确保您的脚本添加了增强所需的元素和类。这样，没有JavaScript的浏览器只会得到一个正常的、未样式的select，而不是一个无法正确更新的样式徽章。

我用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字形。

使用clip属性裁剪选择元素的边框和箭头，然后将自己的替换样式添加到包装中：

<!DOCTYPE html><html><head><style>选择｛位置：绝对；剪辑：矩形（2px 49px 19px 2px）；z索引：2；｝body＞span｛display：块；位置：相对；宽度：64px；高度：21px；边框：2px纯绿色；背景：url(http://www.stackoverflow.com/favicon.ico)右1px不重复；}</style></head><span><选择><option value=“”>Alpha</option><option value=“”>Beta版</option><option value=“”>Charlie</option></选择></span></html>

使用不透明度为零的第二次选择使按钮可单击：

<!DOCTYPE html><html><head><style>#实{位置：绝对；剪辑：矩形（2px 51px 19px 2px）；z索引：2；}#假｛位置：绝对；不透明度：0；｝body>span｛display：块；位置：相对；宽度：64px；高度：21px；背景：url(http://www.stackoverflow.com/favicon.ico)右1px不重复；}</style></head><span><select id=“real”><option value=“”>Alpha</option><option value=“”>Beta版</option><option value=“”>Charlie</option></选择><select id=“fake”><option value=“”>Alpha</option><option value=“”>Beta版</option><option value=“”>Charlie</option></选择></span></html>

Webkit和其他浏览器的坐标不同，但@media查询可以涵盖这一点。

工具书类

Dojo FX测试：dojox.FX.ext-Dojo.complexCSS掩码：使用rect函数测试剪辑属性，并自动将值剪辑到边框框

纯交叉浏览器CSS选择控件样式

规则#1：切勿使用JAVASCRIPT来设置HTML元素的样式！

如果JS被禁用或阻止，CSS将崩溃并烧录。始终从纯CSS开始，然后在您喜欢的任何额外“脚本胶”上分层。记住<select>控件（如HTML中的所有表单字段）被替换为元素，这意味着设备上的浏览器和操作系统对控件的设计和布局具有一定的控制权。这就是为什么Windows、苹果和移动设备控件看起来都不同！这是有原因的。

不要用JavaScript或CSS黑客劫持控件设计，除非您觉得UI由于某种原因（如删除选择控件上的箭头）必须进行修改。下面的CSS不这样做。它接受了它可以在选择表单控件中重新设计的核心限制。我仍然会从我干净的CSS解决方案开始，然后在顶部覆盖任何自定义“黑客”。如果它们失败了，那么您的CSS将优雅地退回到一个始终适用于20多年浏览器的全局CSS设计。。。加上未来的！

下面的CSS代码跨浏览器（从1990年代到现在）工作，并将所有浏览器（过去和现在）与相同的基本CSS设计对齐。您可以根据需要自定义此代码。你可以在非常旧的浏览器中测试它，它应该给你一个与现代HTML5浏览器相匹配的外观和感觉，这应该一直是目标。

/* This CSS works in 20+ years of browsers without hacks, scripts, or tricks. */

body optgroup,
body optgroup:visited,
body optgroup:hover,
body optgroup:focus,
body optgroup:active {
    margin: 0;
    padding: 0;
    font-style: inherit;
    font-weight: bold;
    cursor: pointer;
    background: #fff;
    border: none;
}

body optgroup:visited,
body optgroup:hover,
body optgroup:focus,
body optgroup:active {
    background: #f9f9ff;
}

body option,
body option:visited,
body option:hover,
body option:focus,
body option:active {
    margin: 0;
    padding: 0;
    cursor: pointer;
    background: #fff;
    border: none;
}
body option:visited,
body option:hover,
body option:focus,
body option:active {
    background: #f9f9ff;
}

body select,
body select:visited,
body select:hover,
body select:focus,
body select:active {
    display: inline-block;
    width: auto;
    height: auto;
    min-width: 0;
    max-width: none;
    padding: .17em .17em;
    margin: 0;
    text-transform: none;
    border-radius: .2em;
    border: 2px solid #bbb;
    background: #fff;
    cursor: pointer;
    -webkit-appearance: listbox;
    -moz-appearance: listbox;
    line-height: normal;
}

body select:visited,
body select:hover,
body select:focus,
body select:active {
    background: #f9f9ff;
    border: 2px solid #999;
}
body select:focus {
    background: #fff;
    border: 2px solid #999;
}

body select:required:visited:valid,
body select:required:valid {
    background: #fff;
    border: 2px solid #7fbe96;
}

body select:required:hover:valid {
    background: #f9f9ff;
    border: 2px solid #278b3d;
}

body select:required:focus:valid {
    background: #fff;
    border: 2px solid #278b3d;
}

body select:required:visited:invalid,
body select:required:invalid {
    background: #fff;
    border: 2px solid #ff6565;
}

body select:required:hover:invalid {
    background: #f9f9ff;
    border: 2px solid #ce2f2f;
}

body select:required:focus:invalid {
    background: #fff;
    border: 2px solid #ce2f2f;
}

body select[disabled],
body select[readonly],
body select[disabled="disabled"],
body select[readonly="readonly"],
body select[disabled]:visited,
body select[readonly]:visited,
body select[disabled="disabled"]:visited,
body select[readonly="readonly"]:visited,
body select[disabled]:hover,
body select[readonly]:hover,
body select[disabled="disabled"]:hover,
body select[readonly="readonly"]:hover,
body select[disabled]:focus,
body select[readonly]:focus,
body select[disabled="disabled"]:focus,
body select[readonly="readonly"]:focus,
body select[disabled]:active,
body select[readonly]:active,
body select[disabled="disabled"]:active,
body select[readonly="readonly"]:active {
    border: 2px solid #bbb;
    background: #f0f0f0;
    color: #999;
    cursor: default !important;
}