Patrick D'appollonio Patrick D'appollonio - 3 months ago 10x
CSS Question

Pseudo elements and SELECT tag

I've tried searching it on Google but couldn't find it. Does the SELECT tag allows to use the

selector in order to create a pseudo element after it?

I've tried on Chrome, Safari and Firefox on Mac and it doesn't seem to work.


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.

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

// 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 = $'div.styledSelect');

// Show the first select option in the styled div

// Insert an unordered list after the styled div and also cache the list
var $list = $('<ul />', {
    'class': 'options'

// 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()

// 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)
$ {
    $('').each(function() {

// 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
$ {
    /* alert($this.val()); Uncomment this for demonstration! */

// Hides the unordered list when clicking outside of it
$(document).click(function() {