How can jQuery be used to style a single selected option with a unique color?

Question

How can jQuery be used to style a single selected option with a unique color?

I have a dropdown menu with a default placeholder ("ex. Crawler Excavator") displayed in lightgray. I want only this placeholder to be in lightgray when selected, while all other labels should be black. Currently, I am able to color the selected item lightgray, but it's affecting all other non-empty items as well. For clarification, please refer to the GIF and JSFiddle code provided below:

https://jsfiddle.net/fhgdrxz9/

Snippet Code CSS: css element.style {} select.form-control { text-overflow: visible; cursor: pointer; } .custom-border-radius>input, .custom-border-radius>select, .custom-border-radius div>span>span>.select2-selection .select2-selection--single { border-radius: 6px; border: 1px solid #DADADA; } .empty-label-gray>div>select, .empty-label-gray>select { color: #9e9e9e !important; } And here is an example HTML code block showing the dropdown list structure: html If anyone has any suggestions on how to style only the selected empty caption and keep all other dropdown labels black, or if there is a way to remove the empty caption from the dropdown list altogether (e.g., "Crawler Excavator"), I would greatly appreciate it.

https://i.sstatic.net/0pNDz.gif

javascript jquery css

Answer 1

Answer №1

It may not be achievable solely with CSS, but here's a JavaScript demonstration. Check out this JSFiddle example for reference.

Javascript

const select = document.getElementById("32.MarketPlace.Service_PurchaseConfigurations.dropDown2.100_bom_555");

select.addEventListener("change", () => {
   if(select.value === ""){
     select.style.color = 'gray';
   } else {
     select.style.color = 'black';
   }
})

CSS

select {
  option {
    color: black;
  
    &:first-child {
      color: gray;
    }
  }
}

Answer 2

It may not be achievable solely with CSS, but here's a JavaScript demonstration. Check out this JSFiddle example for reference.

Javascript

const select = document.getElementById("32.MarketPlace.Service_PurchaseConfigurations.dropDown2.100_bom_555");

select.addEventListener("change", () => {
   if(select.value === ""){
     select.style.color = 'gray';
   } else {
     select.style.color = 'black';
   }
})

CSS

select {
  option {
    color: black;
  
    &:first-child {
      color: gray;
    }
  }
}

How can jQuery be used to style a single selected option with a unique color?

Answer №1

Similar questions

Utilizing interactions between a JavaScript scrollable container and Python/selenium

What causes the delay in monitoring the oplog in Meteor and Mongo?

Tips on containing text within a div box without exceeding its boundaries

Despite having magic_quotes_gpc turned off, jQuery Ajax still escapes strings

What steps should I follow to enable my bot to generate or duplicate a new voice channel?

Merging two functions for concealing an element

Adding a badge to a div in Angular 6: What you need to know!

Revalidating doesn't seem to work as expected in Next JS

Is it possible to attach an onclick event to modify a data point in Chart.js?

Step-by-step guide on developing an AngularJs provider using TypeScript

Is there a way to resolve the scrolling problem on Google Maps?

Implement Acrobat JavaScript to enforce a mandatory separate field when a checkbox is selected

Utilizing AngularJS for a Simple AJAX GET Request

When Vue.js Vuex state changes, the template with v-if does not automatically refresh

JavaScript functioning properly in Google Chrome and Firefox but not in Internet Explorer 9

What is the best way to limit the dimension of uploaded images to a specific height and width?

Creating an extra dialogue box when a button is clicked in React

Basic Jquery CSS style requests

Customize the appearance of a hyperlink

What is the best way to position text both before and after the alert box is displayed?