CODEWITHSUNDEEP
javascriptjqueryhtmlcss
evan
evan

Reputation: 964

Style select box option:disabled when it's checked

In the image below, I want Exp. Year (the disabled option) to be grey on page load like a placeholder, and when an option is clicked (2016), I want it to turn to black. It is possible to do this without js?

JSFiddle

What is currently does:

enter image description here

What I want it to do: (Exp. Month is grey on page load, then 2016 is black on select)

enter image description here

.select-box {
  border: 1px solid $ghBlack;
  height: 36px;
  background: transparent;
  margin: 10px 0 14px 0;
  color: #000;
}

option:disabled {
  color: #a9a9a9;
}

option:not(:checked) {
  color: #a9a9a9;
}

Upvotes: 0

Views: 75

Answers (2)

Tomor
Tomor

Reputation: 894

When you explained more what you try to do, then the answer is no, you can't do it without javascript, because the color of the main option is just one....its defined by this css selector

.select-box {
  color: grey;
}

You can only change colors of the options (when the select is opened) - fiddle: http://jsfiddle.net/san6q621/

Upvotes: 0

David Thomas
David Thomas

Reputation: 253308

One way to do this is as follows:

// binding an anonymous function as the change-event handler:
$('select').change(function () {
    // adjusting the 'color' property of the select element:
    $(this).css('color', function () {
        // caching the 'this' variable for efficiency (give repeated use):
        var self = this,
        // finding the options of the select element:
            opts = self.options;
        // getting the currently-selected option, and then checking if
        // it's the default-selected option (returns a Boolean); if it is
        // we set the colour to '#aaa', if not we set the colour to '#000':
        return opts[self.selectedIndex].defaultSelected ? '#aaa' : '#000';
    });
// triggering the change-event so that this runs on page-load:
}).change();

JS Fiddle demo.

Reference:

Upvotes: 1

Related Questions