CODEWITHSUNDEEP
htmlcss
ctrl-alt-delor
ctrl-alt-delor

Reputation: 7745

Style text of select when the selected option is disabled

I have a <select> on my HTML page with several <option>s; some options are disabled (The select is not disabled). I can style the disabled options:

select option:disabled
{ 
    color: red;
}

However, I would also like to style the selected item if it is disabled. It is not possible for the user to get to this state, but it is possible for the page to be served in this state.

How can I style a select if its selected item is disabled?

Upvotes: 7

Views: 5156

Answers (7)

gwyn
gwyn

Reputation: 111

There is a pure CSS solution, with the CSS :has() selector now widely adopted in web browsers.

select option {
  color: black;
}
select option:disabled {
  color: grey;
}
select:has(option:checked:disabled) {
  color: red;
}
<select>
  <option value="1">apples</option>
  <option value="2">oranges</option>
  <option value="3" disabled selected>bananas</option>
</select>

Upvotes: 1

ctrl-alt-delor
ctrl-alt-delor

Reputation: 7745

Thanks everyone. This is what I eventually did, with help from lots of the answers and comments.

<script type="text/html" id="fkeyByName-template">
  <select data-bind="optionsCaption: 'Choose...',
             optionsText:  function(item){ return item.value.name;},
             optionsValue: function(item){ return item.id;},
             valueAllowUnset: true, 
             options: (function(){return $root.foreignKeys.values(col.ftype);})(),
             value: value,
             optionsAfterRender:function(option,item){
               $root.setOptionDisable(option,item,value,$element,$data);
             }
             ">
  </select>
  {{! <p data-bind="text: value"></p> }}
</script>

<script type="text/javascript">
  model.setOptionDisable = function (option, item, value, select, data) {
    if (item) {
      ko.applyBindingsToNode(option, {disable: item.value.removed}, item);
      if (value() == item.id) {
        ko.applyBindingsToNode( select,{css: {disabledSelected: item.value.removed}}, data); 
      }
      select.onchange = function() { 
        ko.applyBindingsToNode( select,{css: {disabledSelected: false}}, data); 
      };
    } 
  }
</script>

<style>
select option:disabled, select.disabledSelected
{ 
  color: red;
} 

/*reset color for options*/
select option:not(:disabled) 
{
  color:initial;
}
</style>

Upvotes: 1

ANeves
ANeves

Reputation: 6385

I propose you add a class to the select, and style it in CSS. Then, when the user changes the selection to something valid, you remove the class.

Example

Here is a trivial implementation using jQuery:

HTML

<select>
    <option>test1</option>
    <option selected disabled>test2</option>
    <option>test3</option>
    <option>test4</option>
</select>

jQuery (onLoad)

$('select > option:selected:disabled').each(function() {
    var select = this.parentNode;
    select.classList.add("select-with-disabled-selected-option");
    $(select).change(function() {
        this.classList.remove("select-with-disabled-selected-option");
    });
});

CSS

.select-with-disabled-selected-option {
    color: red;
}

You might not need jQuery

I used jQuery to make it simpler.
But http://youmightnotneedjquery.com/

Upvotes: 1

Gray
Gray

Reputation: 7140

This option makes use of the selected attribute, and it also uses jQuery. Here is a fiddle to show an example: JsFiddle

HTML

<select>
    <option>test1</option>
    <option selected disabled>test2</option>
    <option>test3</option>
    <option>test4</option>
</select>

jQuery (onLoad)

$('select > option:selected:disabled').each(function(){
    $(this).parent().css("color","red");
});

$('select').change(function(){
    $(this).css("color", "black");
});

CSS

/*reset color for options*/
select option:not(:disabled) {color:black;}

Upvotes: 2

T J
T J

Reputation: 43166

If using js is not a problem,

You can do something like this on page load event:

var elem = document.getElementById('idOfYourSelect');
  var selectedOption= elem[elem.selectedIndex];
  if(selectedOption.disabled == true){
   elem.style.color='red'; // apply the styles
}

and change it back to normal on selecting it (if you want to)

elem.onclick= function(){
elem.style.color='initial'; // revert back to normal style
}

check this fiddle

Upvotes: 2

Oriol
Oriol

Reputation: 288620

The Selectors Level 4 draft introduces the Subject of a Selector, which allows you to use

!select option:disabled
{ 
  color: red;
}

But browsers don't support it yet.

Upvotes: 0

Newton
Newton

Reputation: 47

It is posible with jquery.

Imagine you have this:

<select class="sel">
   <option disabled="true">one</option>
   <option>two</option>
   <option disabled="true">three</option>
   <option>four</option>
</select>

onload function you can put this:

$('.sel option[disabled="true"]').each(function () {
    $(this).attr('style', 'color:red');
});

Upvotes: 0

Related Questions