Problem with <Select> and :After with CSS in Webkit

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.

Select box elements and :after

In your fiddle the following declaration is probably not doing what you expect.

select:after {content: "This doesn't work";}

This will actually append the text after the content of the select box, not after the select box itself. So that text is being added after the last option in the markup. (Which of course is neither valid, nor will it be rendered by the browser.)

In other words if you had this markup:

<a href="#">My link</a>

and this CSS:

a:after {content: " has now been appended to";}

What is actually happening is this:

<a href="#">My link has now been appended to</a>

CSS :after content below a select element causes click not to work

The simplest CSS solution would be to add pointer-events: none to the pseudo element. In doing so, you can click through the element because mouse events are removed.

Updated Example

.select:after {
    position:absolute;
    bottom:.15em;
    top:.15em;
    right:.5rem;
    content:'\2193';
    pointer-events: none;
}

^{(Just take browser support for the property into consideration.)}

CSS pseudo ::after on select box does not open options

Thank you for reply @Nitheesh, @codeuix, @Abin Thaha

I have tried fiddle as @Nitheesh provided, and noticed style setup wrongly also other style was preventing.

There are two problems.

pseudo ::after was setup wrapper div that contains tag.

Sample Image

parent tag was styled with -webkit-appearance: none;

I put ::after style with tag, and removed -webkit-appearance then it worked.

Thank you !

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>

pseudo classes not working on select and radio element

You are using non-standard appearance property, which happens to be supported by Chrome, but not IE. Pseudo elements like ::-ms-expand and ::-ms-check will work only in IE 10+.

Form controls are known to be hard to style, so if you want a consistent cross browser appearance, use UI libraries like jQuery UI or reconsider styling form controls with your designer.

Webkit bug with `:hover` and multiple adjacent-sibling selectors

you can overcome Webkit's pseudo classes + general/adjacent sibling selectors bugs by faking animation on the body element:

body { -webkit-animation: bugfix infinite 1s; }

@-webkit-keyframes bugfix { 
  from { padding: 0; } 
  to { padding: 0; } 
}

you can check it out here: http://jsfiddle.net/jalbertbowdenii/ds2yY/1/

User-select: all inheritance not working in chrome 62

It is an issue on the Chrome browser. The bug was already reported. You can find more details about the bug with another (not working example) on this bug report.

Until the bug is fixed you have the possibility to use some JavaScript to get the behavior. See this answer on StackOverflow.

Another non JavaScript solution would be the following:

.parent :not(.selectable-all) {  -webkit-user-select: none;  -moz-user-select: none;  -ms-user-select: none;  user-select: none;}.selectable-all {  -webkit-user-select: all;  -moz-user-select: all;  -ms-user-select: all;  user-select: all;}

<div class="parent">  <span>user-select set to none and not selectable all.</span>  <div class="child selectable-all">    Parent has user-select set to none, Try to select this text  </div></div>
<div class="child selectable-all">  No parent, Try to select this text</div>

Problem with <Select> and :After with CSS in Webkit