CSS 伪元素和 SELECT 标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21103542/
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
Pseudo elements and SELECT tag
提问by Patrick D'appollonio
Does the selecttag allows to use the :afterselector in order to create a pseudo element after it?
select标签是否允许使用:after选择器在它之后创建一个伪元素？
I've tried on Chrome, Safari and Firefox on Mac and it doesn't seem to work.
我已经在 Mac 上尝试过 Chrome、Safari 和 Firefox，但它似乎不起作用。
采纳答案by Patrick D'appollonio
Well, it looks like the selecttags doesn't allow :afteror :beforepseudos because they are customized by each vendor, so it's quite hard to modify them and that's because they don't allow :beforeor :afterpseudo elements on them.
嗯，看起来select标签不允许:after或:before伪，因为它们是由每个供应商定制的，所以很难修改它们，那是因为它们不允许:before或:after伪元素在它们上面。
To everyone who sees this, there's a good option to create a custom selectelement with jQuery and minimal modification… Create a select and then use jQuery to edit it:
对于看到这一点的每个人，都有一个很好的选择，可以select使用 jQuery 和最少的修改来创建自定义元素……创建一个选择，然后使用 jQuery 对其进行编辑：
// Iterate over each select element
$('select').each(function() {
// Cache the number of options
var $this = $(this),
numberOfOptions = $(this).children('option').length;
// Hides the select element
$this.addClass('s-hidden');
// Wrap the select element in a div
$this.wrap('<div class="select"></div>');
// Insert a styled div to sit over the top of the hidden select element
$this.after('<div class="styledSelect"></div>');
// Cache the styled div
var $styledSelect = $this.next('div.styledSelect');
// Show the first select option in the styled div
$styledSelect.text($this.children('option').eq(0).text());
// Insert an unordered list after the styled div and also cache the list
var $list = $('<ul />', {
'class': 'options'
}).insertAfter($styledSelect);
// Insert a list item into the unordered list for each select option
for (var i = 0; i < numberOfOptions; i++) {
$('<li />', {
text: $this.children('option').eq(i).text(),
rel: $this.children('option').eq(i).val()
}).appendTo($list);
}
// Cache the list items
var $listItems = $list.children('li');
// Show the unordered list when the styled div is clicked (also hides it if the div is clicked again)
$styledSelect.click(function(e) {
e.stopPropagation();
$('div.styledSelect.active').each(function() {
$(this).removeClass('active').next('ul.options').hide();
});
$(this).toggleClass('active').next('ul.options').toggle();
});
// Hides the unordered list when a list item is clicked and updates the styled div to show the selected list item
// Updates the select element to have the value of the equivalent option
$listItems.click(function(e) {
e.stopPropagation();
$styledSelect.text($(this).text()).removeClass('active');
$this.val($(this).attr('rel'));
$list.hide();
/* alert($this.val()); Uncomment this for demonstration! */
});
// Hides the unordered list when clicking outside of it
$(document).click(function() {
$styledSelect.removeClass('active');
$list.hide();
});
});body {
padding: 50px;
background-color: white;
}
.s-hidden {
visibility: hidden;
padding-right: 10px;
}
.select {
cursor: pointer;
display: inline-block;
position: relative;
font: normal 11px/22px Arial, Sans-Serif;
color: black;
border: 1px solid #ccc;
}
.styledSelect {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: white;
padding: 0 10px;
font-weight: bold;
}
.styledSelect:after {
content: "";
width: 0;
height: 0;
border: 5px solid transparent;
border-color: black transparent transparent transparent;
position: absolute;
top: 9px;
right: 6px;
}
.styledSelect:active,
.styledSelect.active {
background-color: #eee;
}
.options {
display: none;
position: absolute;
top: 100%;
right: 0;
left: 0;
z-index: 999;
margin: 0 0;
padding: 0 0;
list-style: none;
border: 1px solid #ccc;
background-color: white;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.options li {
padding: 0 6px;
margin: 0 0;
padding: 0 10px;
}
.options li:hover {
background-color: #39f;
color: white;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selectbox1">
<option value="">Select an option…</option>
<option value="aye">Aye</option>
<option value="eh">Eh</option>
<option value="ooh">Ooh</option>
<option value="whoop">Whoop</option>
</select>
<select id="selectbox2">
<option value="">Month…</option>
<option value="january">January</option>
<option value="february">February</option>
<option value="march">March</option>
<option value="april">April</option>
<option value="may">May</option>
<option value="june">June</option>
<option value="july">July</option>
<option value="august">August</option>
<option value="september">September</option>
<option value="october">October</option>
<option value="november">November</option>
<option value="december">December</option>
</select>回答by user1124838
Here is a compromise that I have used. http://jsfiddle.net/pht9d295/3/
这是我使用过的折衷方案。 http://jsfiddle.net/pht9d295/3/
<div class="select-wrapper">
<select>
<option>United Kingdom</option>
<option>Canada</option>
<option>United States</option>
</select>
</div>
And CSS
和 CSS
body {
background-color: #f6f6f6;
padding: 10px;
}
.select-wrapper {
background-color: #FFF;
display: inline-block;
position: relative;
}
.select-wrapper:after {
content:"\f078";
font-family:'FontAwesome';
position: absolute;
top: 13px;
right: 10px;
z-index: 5;
}
select {
padding: 10px 40px 10px 10px;
-webkit-appearance: none;
-ms-appearance: none;
-moz-appearance: none;
appearance: none;
border: 1px solid #bbb;
background-color: transparent;
border-radius: 0;
position: relative;
cursor: pointer;
z-index: 10;
}
回答by Tessa
This is a modern solution I cooked up using font-awesome. I'm not sure how cross-browser friendly it is. 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的工作演示，该演示使用常规标签和“占位符”标签以及其他清理过的样式（例如边框和宽度）在深色和浅色主题选择框上显示了这段代码。
