Pseudo Elements and Select Tag

Pseudo elements and SELECT tag

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  $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>

select not adding pseudo after selector

As i said in comment you can not use pseudo on select instead wrap your select with a div then use pseudo on it.

select {    border: 1px solid #727272;    -webkit-appearance: none;    border-radius: 0;    width: 100%;    padding: 10px;}.select-option {position: relative;width: 50%;}
.select-option::after {    content: "\F0DA";    font-family: FontAwesome;    font-size: 20px;    color: black;    position: absolute;    right: 10px;    top: 7px;}
select:focus {  outline: 3px solid #ffbf47 !important;  outline-offset: 0;}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"><div class="select-option">  <select class="select">    <option>One</option>    <option>Two</option>  </select></div>

Select text in ::before or ::after pseudo-element

You can't, the before and after pseudo classes are not meant to be used for that purpose.

Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)

You could also pass the content to the pseudo element with a data attribute and then use jQuery to manipulate that:

In HTML:

<span>foo</span>

In jQuery:

$('span').hover(function(){
    $(this).attr('data-content','bar');
});

In CSS:

span:after {
    content: attr(data-content) ' any other text you may want';
}

If you want to prevent the 'other text' from showing up, you could combine this with seucolega's solution like this:

In HTML:

<span>foo</span>

In jQuery:

$('span').hover(function(){
    $(this).addClass('change').attr('data-content','bar');
});

In CSS:

span.change:after {
    content: attr(data-content) ' any other text you may want';
}

CSS rule to select pseudo-elements

You want to select an element base on ::before content?

div::after {
  content: "generated content";
}

I don't think that's possible

You can however select few characters in the class name

div[class^='yourclassname'], div[class*=' yourclassname']{

}

https://codepen.io/gilbertlucas46/pen/xBjKOX

How can I use the CSS pseudo-element :before{ content: '' } to affect an option element?

The ::before and ::after pseudo-elements actually prepend/append a child node to the element, so this will not work on any element that cannot contain child nodes.

It would be (roughly) the equivalent of doing:

<option><span>sandy - </span>beach</option>

If you want to update the text value, you will need to use JavaScript.

Adding an :after element on select options

Short anwser

You can't add :pseudo elements to inputs and image elements.

Alternative?

Well, you could use jquery. But this still won't work on the option element.

$("select").after("Hello");

Snippet

$("select").after("Hello");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><select id="" name="" size="0" class=""><option value="label_0" class=" level-label"></option><option value="241" class="has-no-children" selected="selected">White</option><option value="242" class="has-no-children">Black</option><option value="243" class="has-no-children">Red</option></select>

problem with select and :after with CSS in WebKit

I haven't checked this extensively, but I'm under the impression that this isn't (yet?) possible, due to the way in which select elements are generated by the OS on which the browser runs, rather than the browser itself.

Pseudo Elements and Select Tag