CODEWITHSUNDEEP
javascriptjquerycsshtml-select
Douglas Mauch
Douglas Mauch

Reputation: 869

How style selected option with CSS without styling all the other options?

How can I apply a CSS background color to only the selected option? If I apply a class to the select object, it styles all options. If I apply the desired classes to the options, I can see the styling fine for all the options when the select box is expanded. But when the select box is collapsed, the styling for the selected option is gone. I observe this behavior in the latest versions of Chrome and Firefox.

Here is some super basic example code. Without the jQuery, the selected option always appears unstyled. With the jQuery, once a "modified" option is selected, all options are styled as "modified". I haven't been able to figure out a way around this... Any ideas?

I do not want to change the styling of the options. Only to be able to see the styling of any given option when it is selected without overriding the styling of the others.

<style>
  select.modified,
  option.modified{
    background-color: red;
  }
</style>

<select id="example">
  <option value="bird" class="modified">bird</option>
  <option value="cat">cat</option>
  <option value="dog" class="modified">dog</option>
</select>

<script>
  $('#example').on('change',function(){
    $(this).prop('class',$(this).find('option:selected').prop('class'));  
  });
</script>

Upvotes: 1

Views: 2432

Answers (5)

Douglas Mauch
Douglas Mauch

Reputation: 869

I have found the best workaround for this issue. Basically I have to remove any classes from the selected option on focus, and add it back those classes on blur. This seems to do the trick fairly well.

<script>
  $('#example').on('change',function(){
    // do whatever needs to be done
    $(this).blur();
  }).on('focus',function(){
    $(this).removeClass($(this).find('option:selected').prop('class'));
  }).on('blur',function(){
    $(this).addClass($(this).find('option:selected').prop('class'));
  });
</script>

Upvotes: 0

rlemon
rlemon

Reputation: 17667

Well, after reading the comments I think you really want something along these lines. 

$('#example').on('change', function() {
    console.log(this.options[this.selectedIndex].style);
});​

or without jQuery 

document.getElementById('example').onchange = function() {
    console.log(this.options[this.selectedIndex].style);
};

this will give you a CSSStyleDeclaration of all of the current rules. Keep in mind hex values are returned as rgb.

Demo:
http://jsfiddle.net/rlemon/Qu5Xa/1/

OR the other alternative is to return the className.... 

document.getElementById('example').onchange = function() {
    console.log(this.options[this.selectedIndex].className);
};

or jQuery 

$('#example').on('change', function() {
    $(this.options[this.selectedIndex]).attr('class'); // however I would still not even bother wrapping this up in jQuery and just use this.options[this.selectedIndex].className
});​

Upvotes: 0

Robin Maben
Robin Maben

Reputation: 23094

select option.modified { color: red; /*something*/ }

$('#example').on('change', function(){
    $(this).find('option').removeClass('modified');
    $(this).find('option:selected').addClass('modified');
});

Upvotes: 1

Ram
Ram

Reputation: 144739

Try this:

$('#example').on('change',function(){
   $(':selected', this).addClass('modified').siblings().removeClass('modified')
});


option.modified{
   background-color: red;
}

FIDDLE

Upvotes: 1

n8wrl
n8wrl

Reputation: 19765

Your event is on the entire selected#example list so naturally all its options would get the background since they SIT on the select. Try tying your event to the option tags.

Also, Your 2nd rule applies the color to ALL option tags AND fictitious modified tags. By replacing the , with a . you'll do what you mean - only those options with the modified class.

Upvotes: 0

Related Questions