Css :Selected Pseudo Class Similar to :Checked, But For ≪Option≫ Elements

CSS :selected pseudo class similar to :checked, but for option elements

the :checked pseudo-class initially applies to such elements that have the HTML4 selected and checked attributes

Source: w3.org

So, this CSS works, although styling the color is not possible in every browser:

option:checked { color: red; }

An example of this in action, hiding the currently selected item from the drop down list.

option:checked { display:none; }

<select>    <option>A</option>    <option>B</option>    <option>C</option></select>

Selected select pseudo-class

No there is no such pseudo-class. Could be because a regular select element always has an option selected. This is not the case on select multiple elements.

Styling selected option

try this .

.your-select option:checked {
    background:#333;padding:20px;width:100px;border:3px solid #F00
}

<select multiple class="your-select">
    <option class="opt1" value="">Option 1</option>
    <option class="opt2" value="">Option 2</option>
 </select>

CSS Selector to Match All Other Elements of Same Class Except Selected One (This)

Consider a container for your elements and you can easily do this:

.box { display:inline-block;}.box:hover a {  color:red;}.box a:hover {  color:initial;}

<div class="box"><a href="#" class="foo">Hello!</a><a href="#" class="foo">¡Hola!</a><a href="#" class="foo">Bonjour !</a></div>

Detecting if an option has been selected in select using CSS

Yes, the :checked pseudo-class also targets <option> tags.

Example:

option:checked { display:none; }

Source:

http://www.w3.org/TR/selectors/#checked

EDIT:

If you want to target an element outside of your <select>, it can be done in a hacky way by manipulating the :valid css pseudo-class. Note that the required attribute must be enabled for the <select> tag to register as valid/invalid.

Example:

body {  background-color: #fff;}
select:valid ~ label {  background-color: red;}

<select required>  <option value="" selected>Please select an option</option>  <option>1</option>  <option>2</option></select><label>Please select an option</label>

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>

Selecting checked element in CSS

There is no pseudo selector for marking select boxes the way you imagine. So the answer to your original question is No :(

But if you dont mind using a tiny bit of JavaScript then you can emulate the feature you desire. You can add a class to the select box's onchange method. Ideally this should be done from the bottom of the page inside a script tag. I m doing it inline only as a demo:

<select id="razred" name="razred" onchange='this.className="visited"'>

And then you could just define the custom class the way you want

.visited {
    color: #f00;
    -webkit-appearance: none;  /*required for webkit based browsers*/
}

JSFiddle: http://jsfiddle.net/9K5h2/1

Css :Selected Pseudo Class Similar to :Checked, But For ≪Option≫ Elements