What is the best way to style the currently selected option element in a select dropdown?

Question

What is the best way to style the currently selected option element in a select dropdown?

I am trying to change the font color of specific option elements within a select dropdown by adding style="color: #D4D4D4". When I apply this style directly to an option element like

<option value="TEST" style="color: #D4D4D4">TEST</option>

, it works when the options are expanded. However, the selected option (when the dropdown is closed) still shows the default font color. How can I change this as well?

Update:

Thank you for the suggestion! Unfortunately, using sel.onchange does not track attribute changes made to option elements. I am using jQuery to set attributes and need the updates to be immediately reflected in the select dropdown. Is there a way to achieve this?

Here is my jQuery code:

$('.form-control option[value="' + $scope.environment + '"]').attr('style', 'color: #D4D4D4');

javascript jquery html css

Answer 1

Answer №1

var selectElement = document.getElementById("select-element");

function changeSelectColor(){
  selectElement.style.color = selectElement.options[selectElement.selectedIndex].style.color;
}

changeSelectColor(); // Execute once ready
selectElement.onchange = changeSelectColor; // Trigger on change event

<select id="select-element">
    <option value="TEST1" style="color:red">TEST1</option>
    <option value="TEST2" style="color:blue">TEST2</option>
    <option value="TEST3" style="color:green">TEST3</option>
</select>

Answer 2

var selectElement = document.getElementById("select-element");

function changeSelectColor(){
  selectElement.style.color = selectElement.options[selectElement.selectedIndex].style.color;
}

changeSelectColor(); // Execute once ready
selectElement.onchange = changeSelectColor; // Trigger on change event

<select id="select-element">
    <option value="TEST1" style="color:red">TEST1</option>
    <option value="TEST2" style="color:blue">TEST2</option>
    <option value="TEST3" style="color:green">TEST3</option>
</select>

Answer 3

Answer №2

Use this code snippet to achieve the desired effect

JAVASCRIPT

    $('#selectElement').change(function(){
        $('#selectElement').find(":selected").css('color', '#D4D4D4');
        $('#selectElement').find("option:not(:selected)").css('color', '#000000');
    });

See an example here: http://example.com/12345

Answer 4

Use this code snippet to achieve the desired effect

JAVASCRIPT

    $('#selectElement').change(function(){
        $('#selectElement').find(":selected").css('color', '#D4D4D4');
        $('#selectElement').find("option:not(:selected)").css('color', '#000000');
    });

See an example here: http://example.com/12345

What is the best way to style the currently selected option element in a select dropdown?

Answer №1

Answer №2

Similar questions

Send dropdown selections to a Javascript function and convert them into an array

iPhone Safari Mobile Browser experiencing issues with sms: and mailto: functionalities

The protected routes within a React JS application consistently result in an undefined value

The information I input into this form is failing to be stored in the WAMP database

Disregarding 'zIndex' directive within JavaScript function, an image stands apart

Choose the element before and add a style effect with CSS

Is there a way to refine a table based on the specific rows that are chosen in ag-Grid?

What are the steps to adjust the width of a website from the standard size to a widescreen

Enhance the appearance of Ionic popups

Approach for fetching these JSON records

Is the new mui LoadingButton not available in the latest version?

Pictures failing to load on both Chrome and Safari browsers

Can we expect React's useState to wait before executing subsequent logic, or will it immediately update the state and trigger a re-render

Utilize Bootstrap button dropdown to automatically assign a selected value to a list item

Highlight and trim lengthy text using React

React Intersection Observer not functioning properly

Retrieving a specific view by utilizing the primary key in the URL pattern

AngularJS dual-stage resolution for resolving dependencies

What is the best way to distinguish between inline javascript and dynamically created content in Express/Node.js?

The ng-repeat directive adds an additional line after each iteration of the list item