伪元素和SELECT标签 [英] Pseudo elements and SELECT tag
问题描述
我尝试在Google上搜索,但找不到它。 SELECT标签是否允许使用:after
选择器以便在其后创建伪元素?
I've tried searching it on Google but couldn't find it. Does the SELECT tag allows to use the :after
selector in order to create a pseudo element after it?
我在Mac上尝试使用Chrome,Safari和Firefox,似乎无法正常工作。
I've tried on Chrome, Safari and Firefox on Mac and it doesn't seem to work.
推荐答案
好吧,它看起来像SELECT标签不允许:after或:在pseudos之前,因为它们是由每个供应商定制的,所以很难修改它们, t allow:before或:after伪元素。
Well, it looks like the SELECT tags doesn't allow :after or :before pseudos because they are customized by each vendor, so it's quite hard to modify them and that's because they don't allow :before or :after pseudo elements on them.
对于所有看到这个的人来说,使用jQuery和最小修改创建一个自定义SELECT元素是一个很好的选择。 。创建一个选择,然后使用jQuery来编辑它:
To everyone who sees this, there's a good option to create a custom SELECT element with jQuery and minimal modification... Create a select and then use jQuery to edit it:
// 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();
});
});
http: //jsfiddle.net/tovic/ZTHkQ/
这篇关于伪元素和SELECT标签的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!