Change color of the first selected option in dropdown menu

Question

I'm trying to change the color of the first selection and let the rest of the selection-options remain in its inherit color which is black.

However, I'm unable to get it going. Currently; all colors are in #ccc. I want the first option which is disabled to be #ccc and the rest in inherit color.

Here's the HTML:

<select class="form-control select form__blank">
  <option disabled selected value> - select - </option>
  <option>Full Furnished</option>
  <option>Semi Furnished</option>
  <option>UnFurnished</option>
</select>

CSS:

.form-control {
  border-radius: 25px;
  border: 1px solid #323a56;
  width: 100%;
  padding: 10px 15px;
  font-size: 14px;
}
.select {
  border-radius: 25px;
  border: 1px solid #323a56;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-position: right 50%;
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);
  height: inherit;
}
.form__blank:first-child {
  color: #ccc;
}

JSFIDDLE: https://jsfiddle.net/v9gasouf/

Hope it makes sense.

does .form__blank option:first-child in your css works ? – Stéphane Ammar Sep 05 '17 at 09:16 — Stéphane Ammar, Sep 05 '17 at 09:16
You can use `select option:disabled` css selector. – Troyer Sep 05 '17 at 09:17 — Troyer, Sep 05 '17 at 09:17
Tried already. Didn't work. – Elaine Byene Sep 05 '17 at 09:19 — Elaine Byene, Sep 05 '17 at 09:19

Troyer · Answer 1 · 2017-09-05T10:00:54.807

The main problem on this is styling options/select its a very difficult task because each browser acts different or uses a different way to display them.

You have there a StackOverflow question with a very good explanation why and a lots of possibles workarounds.

For Chrome v.57.0.2987 you can use the CSS selector: select option:disabled and would do the work:

.form-control {
  border-radius: 25px;
  border: 1px solid #323a56;
  width: 100%;
  padding: 10px 15px;
  font-size: 14px;
}
.select {
  border-radius: 25px;
  border: 1px solid #323a56;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-position: right 50%;
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);
  height: inherit;
}
.form__blank select option:disabled {
  color: #ccc;
}

<select class="form-control select form__blank">
  <option disabled selected value> - select - </option>
  <option>Full Furnished</option>
  <option>Semi Furnished</option>
  <option>UnFurnished</option>
</select>

This doesn't work either. I want the ` - select - ` to be in color #ccc as is shown in the JSFiddle. That should not be changed. However, when I select other fields, the color should be changed to `inherit` or #000. — Elaine Byene, Sep 05 '17 at 09:21
I'm on Mac Chrome Version 60.0.3112.113 (Official Build) (64-bit) — Elaine Byene, Sep 05 '17 at 09:27
@ElaineByene The problem is pure CSS for `option` styles cross browsers are hard to archive, it means maybe you archive the correct behavior on Chrome but will look totally diferent at Firefox, you have a very good explanation with solutions there: https://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript — Troyer, Sep 05 '17 at 09:31

score 1 · Answer 2 · answered Sep 05 '17 at 09:16

1

You shouldn't do

.form__blank:first-child {
   color: #ccc;
}

but instead :

.form__blank option:first-child {
   color: #ccc;
}

answered Sep 05 '17 at 09:16

KaraNyyan

128
1
12

Tried this actually but didn't work. Nothing changes. – Elaine Byene Sep 05 '17 at 09:19

score 0 · Answer 3 · answered Sep 05 '17 at 09:18

0

Select first child of option instead of select.

option:first-child {
 color: #ccc;
}

answered Sep 05 '17 at 09:18

Abdullah Danyal

1,016
1
9
24

Tried this already but didn't work. I tried with `form__blank option:first-child` too. – Elaine Byene Sep 05 '17 at 09:20
what if i will give you JavaScript solution? – Abdullah Danyal Sep 05 '17 at 09:20

akshaya rathinavel · Answer 4 · 2017-09-05T09:54:53.343

0

Instead of styling :first-child You can style using [disabled] property

select option:disabled{
  color:red;
}

You can also check the below fiddle example.

https://jsfiddle.net/achuakshuu/e97nqLuh/

edited Sep 05 '17 at 09:54

answered Sep 05 '17 at 09:24

akshaya rathinavel

327
3
10

No. I don't see any red color! Which browser are you using? I'm on Mac Chrome Version 60.0.3112.113 (Official Build) (64-bit). I event tried it on Safari. Doesn't see any red color. – Elaine Byene Sep 05 '17 at 09:25
I am using windows10 chrome. You want the -select- option only to be in red color or selected value has to change the color – akshaya rathinavel Sep 05 '17 at 09:34
Only the -select- to be in red. The rest remains as it is. – Elaine Byene Sep 05 '17 at 09:44
change [disabled] to :disabled – akshaya rathinavel Sep 05 '17 at 09:55
Nothing! https://jsfiddle.net/e97nqLuh/2/ I'm suppose to see -select- but default but that's not the case either :/ – Elaine Byene Sep 06 '17 at 10:30

Znaneswar · Answer 5 · 2017-09-05T10:04:24.443

0

Try like this

<select id="selid" class="form-control select form__blank">
.....
</select>

JS(JQuery)

$('#selid').change(function () {
$(this).find('option').css('color', 'inherit');
$(this).find('option:selected').css('color', 'red');
}).trigger('change');

or

$('#selid').change(function () {
$(this).css("color", $("option").css("color", 'inherit'));
$(this).css("color", $("option:selected").css("color", 'blue'));
}).trigger('change');

edited Sep 05 '17 at 10:04

answered Sep 05 '17 at 09:28

Znaneswar

3,250
2
14
24

As per your question, selected item highlighted – Znaneswar Sep 05 '17 at 09:37
I don't know. Now, all the colors changed to #ccc :( I guess it's my Chrome version!! – Elaine Byene Sep 05 '17 at 09:43
Check this https://jsfiddle.net/v9gasouf/6/. In last fiddle i have applied for background – Znaneswar Sep 05 '17 at 09:48
I give up!! It's not working. The other options apart from -select- changed to #ccc. That's the same stage as where I was when I asked the question :( – Elaine Byene Sep 06 '17 at 10:31

Change color of the first selected option in dropdown menu

5 Answers5