Alter the color of the initially chosen option in the dropdown selection

Question

Alter the color of the initially chosen option in the dropdown selection

I'm struggling to modify the color of the initial selection while keeping the remaining selection-options at their default black color.

Unfortunately, I haven't been successful in achieving this. Currently, all colors are #ccc. What I want is for the disabled first option to be #ccc and the rest to be in their default color.

Below is the HTML code:

<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/

Hopefully, this explanation is clear.

javascript jquery html css

Answer 1

Answer №1

The primary issue here is customizing options/select and it can be quite challenging due to the varying behavior of different browsers when it comes to displaying them.

You can refer to this StackOverflow thread for a detailed explanation and numerous potential workarounds.

For Chrome v.57.0.2987, you can utilize the CSS selector: select option:disabled which should help achieve the desired styling:

.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+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTMzU3REIzMzIyQiIiIDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPXhtcC5paWQ6NDZFNDEwNjJGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNjNFMzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiLz4gPHJkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/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>

Answer 2

The primary issue here is customizing options/select and it can be quite challenging due to the varying behavior of different browsers when it comes to displaying them.

You can refer to this StackOverflow thread for a detailed explanation and numerous potential workarounds.

For Chrome v.57.0.2987, you can utilize the CSS selector: select option:disabled which should help achieve the desired styling:

.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+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTMzU3REIzMzIyQiIiIDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPXhtcC5paWQ6NDZFNDEwNjJGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNjNFMzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiLz4gPHJkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/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>

Answer 3

Answer №2

Avoid using

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

Try using the following code instead:

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

Answer 4

Avoid using

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

Try using the following code instead:

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

Answer 5

Answer №3

Choose the initial child of the selection rather than picking the select option.

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

Answer 6

Choose the initial child of the selection rather than picking the select option.

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

Answer 7

Answer №4

Instead of applying styles to :first-child, try using the [disabled] property for styling.

select option:disabled{
  color:red;
}

For a practical demonstration, you can refer to the fiddle example linked below.

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

Answer 8

Instead of applying styles to :first-child, try using the [disabled] property for styling.

select option:disabled{
  color:red;
}

For a practical demonstration, you can refer to the fiddle example linked below.

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

Answer 9

Answer №5

Here is an example to try out:

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

JavaScript (using JQuery)

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

Alternatively,

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

Answer 10

Here is an example to try out:

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

JavaScript (using JQuery)

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

Alternatively,

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

Alter the color of the initially chosen option in the dropdown selection

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Loop through a non-array or non-object / handling both arrays and non-arrays equally

Access the keys of a Flow object type within your codebase

Is there a way to apply an event function after adding elements through append?

Position Bootstrap buttons to the right side

What are the steps to integrating D3js into a WordPress website?

AngularJS restricts inputs to be read-only

The function is not operational while executing addEventListener

Error: The fetch request was unsuccessful [NextJS API]

How can one utilize XPath and the R language to selectively extract portions of a text string when the strings are varied and inconsistent?

Building an interactive array with checkboxes and mapping in React JS: A step-by-step guide

Is there a way to decrease a field in a MongoDB database on a daily basis?

Using the jQuery click function to duplicate posts when checkboxes are checked

What is the best way to include additional columns in a multiselect dropdown using jQuery select2?

Differences between encoding URL variables in HREF and using JS window.location for onclick events

Is there a way to execute a PHP script using Ajax without needing any return values?

The functionality of jquery ujs seems to be impaired when I try to load partials or content remotely using remote calls or

Adjust image to fit inside a compact popup window - Implementing React.js and Bootstrap

export module from the express framework

How to achieve an endless cycle using Promise recursion in a NodeJS environment

Upon receiving the ajax request, the entire code page is called back