Html <select> 和 :after 与 WebKit 中的 CSS 的问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3532649/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
problem with <select> and :after with CSS in WebKit
提问by Nicolas Merouze
I would like to add some style on a select box with the pseudo :after (to style my select box with 2 parts and without images). Here's the HTML:
我想在带有伪 :after 的选择框上添加一些样式（用 2 个部分和没有图像来设置我的选择框的样式）。这是 HTML：
<select name="">
<option value="">Test</option>
</select>
And it doesn't work. I don't know why and I didn't find the answer in the W3C specs. Here's the CSS:
它不起作用。我不知道为什么，也没有在 W3C 规范中找到答案。这是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;
}
So is it normal or is there a trick?
所以这是正常的还是有什么窍门？
回答by David says reinstate Monica
I haven't checked this extensively, but I'm under the impression that this isn't (yet?) possible, due to the way in which selectelements are generated by the OS on which the browser runs, rather than the browser itself.
我还没有对此进行广泛的检查，但我的印象是这不是（还？）可能的，这是由于select浏览器运行的操作系统而不是浏览器本身生成元素的方式。
回答by sroy
I was looking for the same thing since the background of my select is the same as the arrow color. As previously mentioned, it is impossible yet to add anything using :before or :after on a select element. My solution was to create a wrapper element on which I added the following :before code.
我一直在寻找同样的东西，因为我选择的背景与箭头颜色相同。如前所述，不可能在选择元素上使用 :before 或 :after 添加任何内容。我的解决方案是创建一个包装器元素，在该元素上添加了以下内容：before 代码。
.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;
}
And this my 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;
}
I have used FontAwesome.io for my new arrow, but you can use whatever else you want. Obviously this is not a perfect solution, but depending on your needs it might be enough.
我已经将 FontAwesome.io 用于我的新箭头，但你可以使用任何你想要的。显然，这不是一个完美的解决方案，但根据您的需要，这可能就足够了。
回答by ?onny
To my experience it simply does not work, unless you are willing to wrap your <select>in some wrapper. But what you can do instead is to use background image SVG. E.g.
根据我的经验，它根本不起作用，除非您愿意将其包装<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;
}
Just be careful with proper URL-encoding because of IE. You must use charset=utf8(not just utf8), don't use double-quotes (") to delimit SVG attribute values, use apostrophes (') instead to simplify your life. URL-encode s (%3E). In case you havee to print any non-ASCII characters you have to obtain their UTF-8 representation (e.g. BabelMap can help you with that) and then provide that representation in URL-encoded form - e.g. for ? (U+25BEBLACK DOWN-POINTING SMALL TRIANGLE) UTF-8 representation is \xE2\x96\xBEwhich is %E2%96%BEwhen URL-encoded.
由于 IE，请注意正确的 URL 编码。您必须使用charset=utf8（不仅仅是utf8），不要使用双引号 (") 来分隔 SVG 属性值，而是使用撇号 (') 来简化您的生活。URL 编码 (%3E)。以防万一您不得不打印您必须获得它们的 UTF-8 表示的任何非 ASCII 字符（例如 BabelMap 可以帮助您解决这个问题），然后以 URL 编码的形式提供该表示 - 例如对于 ? ( U+25BEBLACK DOWN-POINTING SMALL TRIANGLE) UTF-8 表示是\xE2\x96\xBE这是%E2%96%BE在 URL 编码时。
回答by Glauber Ramos
This post may help http://bavotasan.com/2011/style-select-box-using-only-css/
这篇文章可能会有所帮助http://bavotasan.com/2011/style-select-box-using-only-css/
He is using a outside div with a class for resolving this issue.
他正在使用带有类的外部 div 来解决此问题。
<div class="styled-select">
<select>
<option>Here is the first option</option>
<option>The second option</option>
</select>
</div>
回答by Ivan
Faced the same problem. Probably it could be a solution:
面临同样的问题。可能它可能是一个解决方案：
<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 {
...
}
回答by LarS
This solution is similar to the one from sroy, but with css triangle instead of web font:
此解决方案类似于 sroy 的解决方案，但使用 css 三角形而不是 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>回答by Dominic Hurr
What if modifying the markup isn't an option?
如果修改标记不是一种选择怎么办？
Here's a solution that has no requirements for a wrapper: it uses an SVG in a background-image. You may need to use an HTML entity decoderto understand how to change the fill colour.
这是一个对包装器没有要求的解决方案：它在背景图像中使用 SVG。您可能需要使用HTML 实体解码器来了解如何更改填充颜色。
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
background-repeat: no-repeat;
background-position: right .7em top 50%;
background-size: .65em auto;
Pinched from CSS-Tricks.
来自CSS-Tricks。
回答by Tessa
This is a modern solution I cooked up using font-awesome. Vendor extensions have been omitted for brevity.
这是我使用font-awesome 编写的现代解决方案。为简洁起见，已省略供应商扩展。
HTML
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;
}
}
}
If your select element has a defined background color, then this won't work as this snippet essentially places the Chevron icon behind the select element (to allow clicking on top of the icon to still initiate the select action).
如果您的 select 元素具有定义的背景颜色，那么这将不起作用，因为此代码段实际上将 Chevron 图标放置在 select 元素后面（以允许单击图标顶部仍启动选择操作）。
However, you can style the select-wrapper to the same size as the select element and style its background to achieve the same effect.
但是，您可以将 select-wrapper 的样式设置为与 select 元素相同的大小，并为其背景设置样式以达到相同的效果。
Check out my CodePenfor a working demo that shows this bit of code on both a dark and light themed select box using a regular label and a "placeholder" label and other cleaned up styles such as borders and widths.
查看我的CodePen的工作演示，该演示使用常规标签和“占位符”标签以及其他清理过的样式（例如边框和宽度）在深色和浅色主题选择框上显示了这段代码。
P.S. This is an answer I had posted to another, duplicate question earlier this year.
PS 这是我今年早些时候发布到另一个重复问题的答案。
回答by blacksheep
<div class="select">
<select name="you_are" id="dropdown" class="selection">
<option value="0" disabled selected>Select</option>
<option value="1">Student</option>
<option value="2">Full-time Job</option>
<option value="2">Part-time Job</option>
<option value="3">Job-Seeker</option>
<option value="4">Nothing Yet</option>
</select>
</div>
Insted of styling the select why dont you add a div out-side the select.
设置样式选择为什么不在选择之外添加 div。
and style then in CSS
然后在 CSS 中设置样式
.select{
width: 100%;
height: 45px;
position: relative;
}
.select::after{
content: '\f0d7';
position: absolute;
top: 0px;
right: 10px;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
color: #0b660b;
font-size: 45px;
z-index: 2;
}
#dropdown{
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
height: 45px;
width: 100%;
outline: none;
border: none;
border-bottom: 2px solid #0b660b;
font-size: 20px;
background-color: #0b660b23;
box-sizing: border-box;
padding-left: 10px;
padding-right: 10px;
}
