Modify the color of the dropdown list title within a designated area

Question

Modify the color of the dropdown list title within a designated area

I am looking to customize the font color of specific text within a dropdown list. The two options in the list are: 1. Doctor Name 1 (Discount 10%) and 2. Doctor Name 2 (Discount 15%). I would like to change the font color of only (Discount 10%) (to red) and (Discount 15%) (to blue). Can anyone guide me on how to achieve this customization?

<html>
<head>
</head>
<body>
<select name="">
    <option value="" >Select Doctor Name</option>
    <option value="1">Doctor Name 1 (Discount 10%)</option>
    <option value="2">Doctor Name 2 (Discount 15 %)</option>
</select>
</body>
<html>

jquery html css

Answer 1

Answer №1

For this particular problem, I would opt for using JavaScript as it provides better maintainability when dealing with multiple options and also allows for adjusting the color of the selected item, which cannot be achieved solely with CSS. Below is the approach I would take:

var colorSelect = document.getElementById('colorSelect');

// Initialize all colors to the value provided by data-color attribute or default to black
function initColorSelect() {
  var options = colorSelect.getElementsByTagName('option');
  var selIndex = colorSelect.selectedIndex;
  for (var i = 0; i < options.length; ++i) {
    var color = '#000';
    if (options[i].hasAttribute('data-color')) {
    color = options[i].dataset.color;
    }
    options[i].style.color = color;
    if (i == selIndex) colorSelect.style.color = color;
  }
}

// Change the color of the selected item
function colorSelectChanged() {
  var option = this.options[this.selectedIndex];
  var color = '#000';
  if (option.hasAttribute('data-color')) {
    color = option.dataset.color;
  }
  colorSelect.style.color = color;
}

window.addEventListener('load', initColorSelect, false);
colorSelect.addEventListener('change', colorSelectChanged, false);

<body>
  <select id="colorSelect">
    <option value="">Select Doctor Name</option>
    <option value="1" data-color="#f00">Doctor Name 1 (Discount 10%)</option>
    <option value="2" data-color="#00f">Doctor Name 2 (Discount 15 %)</option>
  </select>
</body>

Answer 2

For this particular problem, I would opt for using JavaScript as it provides better maintainability when dealing with multiple options and also allows for adjusting the color of the selected item, which cannot be achieved solely with CSS. Below is the approach I would take:

var colorSelect = document.getElementById('colorSelect');

// Initialize all colors to the value provided by data-color attribute or default to black
function initColorSelect() {
  var options = colorSelect.getElementsByTagName('option');
  var selIndex = colorSelect.selectedIndex;
  for (var i = 0; i < options.length; ++i) {
    var color = '#000';
    if (options[i].hasAttribute('data-color')) {
    color = options[i].dataset.color;
    }
    options[i].style.color = color;
    if (i == selIndex) colorSelect.style.color = color;
  }
}

// Change the color of the selected item
function colorSelectChanged() {
  var option = this.options[this.selectedIndex];
  var color = '#000';
  if (option.hasAttribute('data-color')) {
    color = option.dataset.color;
  }
  colorSelect.style.color = color;
}

window.addEventListener('load', initColorSelect, false);
colorSelect.addEventListener('change', colorSelectChanged, false);

<body>
  <select id="colorSelect">
    <option value="">Select Doctor Name</option>
    <option value="1" data-color="#f00">Doctor Name 1 (Discount 10%)</option>
    <option value="2" data-color="#00f">Doctor Name 2 (Discount 15 %)</option>
  </select>
</body>

Modify the color of the dropdown list title within a designated area

Answer №1

Similar questions

Techniques for dynamically displaying or hiding elements depending on various input groups using jQuery?

jQuery form validation with delay in error prompts

I am facing difficulty creating a dropdown menu with nested options that only appear when the user hovers over the main selection

The view function in Django will not be triggered by an Ajax call

Left-aligned and centered - Bootstrap

My attempts to make a server-side function call with Ajax have been unsuccessful

Unable to display the absolute path of the image src in WebStorm

How can I define the boundaries for the scrolling of a static background image?

CSS animation for typing effect not functioning correctly as text is being displayed before the animation starts

Guidelines for showcasing a map on my website with the option for users to select a specific country

Employing jQuery for adding a class to the initial TD in every table row

Creating new rows dynamically with jQuery

The children elements inside a parent div with Flexbox are now taking on the height of their container

I'm experiencing an issue where the changes I make in .aspx files are not showing up when I debug or rebuild

How can jQuery-based Ajax/PHP be leveraged for synchronization effects?

The jQuery window is not showing up as it was written in the code

Establish the default bootstrap theme mode specifically for print formatting

Is there a way to extract all the aria-label attributes from elements that share a common class?

Concealment Based on Surroundings

Guide to deactivating a control within a User Control