问题与<select>和：之后与WebKit中的CSS
我想在伪select框中添加一些样式：after（使用2个部分和不带图像的select框样式）。 这是HTML：
<select name=""> <option value="">Test</option> </select> 它不起作用。 我不知道为什么，也没有在W3C规范中find答案。 这里是CSS：
select { -webkit-appearance: none; background: black; border: none; border-radius: 0; color: white; } select:after { content: " "; display: inline-block; width: 24px; height: 24px; background: blue; }
那么这是正常的还是有一个窍门？
我还没有广泛的检查过这个，但是由于浏览器运行的操作系统生成select元素的方式，而不是浏览器本身。
我正在寻找同样的东西，因为我的select的背景是一样的箭头颜色。 如前所述，在select元素之前或之后添加任何东西是不可能的。 我的解决scheme是创build一个包装元素，我添加了以下内容：在代码之前。
.select-wrapper { position: relative; } .select-wrapper:before { content: '\f0d7'; font-family: FontAwesome; color: #fff; display: inline-block; position: absolute; right: 20px; top: 15px; pointer-events: none; }
而这个我select
select { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; width: 100%; padding: 10px 20px; background: #000; color: #fff; border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } select::-ms-expand { display: none; }
我已经使用FontAwesome.io作为我的新箭头，但是你可以使用任何你想要的。 显然这不是一个完美的解决scheme，但根据您的需要，这可能就足够了。
这篇文章可能会帮助http://bavotasan.com/2011/style-select-box-using-only-css/
他正在用一个外面的课程来解决这个问题。
<div class="styled-select"> <select> <option>Here is the first option</option> <option>The second option</option> </select> </div>
面临同样的问题。 可能它可能是一个解决scheme：
<select id="select-1"> <option>One</option> <option>Two</option> <option>Three</option> </select> <label for="select-1"></label> #select-1 { ... } #select-1 + label:after { ... }
这个解决scheme与sroy类似，但是用css三angular形而不是web字体：
.select-wrapper { position: relative; width: 200px; } .select-wrapper:after { content: ""; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #666; position: absolute; right: 8px; top: 8px; pointer-events: none; } select { background: #eee; border: 0 !important; border-radius: 0; -webkit-appearance:none; -moz-appearance:none; appearance:none; text-indent: 0.01px; text-overflow: ""; font-size: inherit; line-height: inherit; width: 100%; } select::-ms-expand { display: none; }
<div class="select-wrapper"> <select> <option value="1">option 1</option> <option value="2">option 2</option> <option value="3">option 3</option> </select> </div>
根据我的经验，这根本行不通，除非你愿意把你的<select>包装在一些包装中。 但是你可以做的是使用背景图像SVG。 例如
.archive .options select.opt { -moz-appearance: none; -webkit-appearance: none; padding-right: 1.25EM; appearance: none; position: relative; background-color: transparent; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='10px' width='15px'%3E%3Ctext x='0' y='10' fill='gray'%3E%E2%96%BE%3C/text%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 1.5EM 1EM; background-position: right center; background-clip: border-box; -moz-background-clip: border-box; -webkit-background-clip: border-box; } .archive .options select.opt::-ms-expand { display: none; }
只要小心，正确的URL编码，因为IE浏览器。 你必须使用charset=utf8 （不仅仅是utf8 ），不要用双引号（“）来分隔SVG属性值，而是用撇号（'）来简化你的生活URL编码s（％3E）。你必须打印任何非ASCII字符，你必须获得他们的UTF-8表示（例如BabelMap可以帮助你），然后以URL编码的forms提供这种表示forms – 例如▾（ U+25BE BLACK DOWN-POINTING SMALL TRIANGLE）当URL编码时，UTF-8表示是\xE2\x96\xBE ，它是%E2%96%BE 。
这是我使用font-awesome制作的现代解决scheme。 为简洁起见，供应商扩展已被省略。
HTML
<fieldset> <label for="color">Select Color</label> <div class="select-wrapper"> <select id="color"> <option>Red</option> <option>Blue</option> <option>Yellow</option> </select> <i class="fa fa-chevron-down"></i> </div> </fieldset>
SCSS
fieldset { .select-wrapper { position: relative; select { appearance: none; position: relative; z-index: 1; background: transparent; + i { position: absolute; top: 40%; right: 15px; } } }
如果您的select元素具有已定义的背景颜色，则此代码不起作用，因为此代码段实际上将Chevron图标放置在select元素的后面（以允许单击图标顶部仍然启动select操作）。
但是，您可以将select-wrapper的样式设置为与select元素相同的大小，并对其背景进行样式设置以获得相同的效果。
看看我的CodePen的工作演示，使用常规标签和“占位符”标签以及其他清理过的样式（如边框和宽度）在深色和浅色主题select框上显示此位代码。
PS这是我在今年早些时候发布给另一个重复问题的答案。
