Color remains unchanged for selected value in dropdown menu

I'm facing a challenge in changing the color of the selected value in the dropdown menu. Each value has a different color, but when I select one, it reverts back to black.

.appt-status select option[value="0"] {
    color: #3EA47B;
}

.appt-status option[value="1"] {
    color: #3EA47B
}

.appt-status option[value="2"] {
    color: #FF0000;
}

.appt-status option[value="3"] {
    color: #FFA927;
}
  <select class="form-control appt-status" data-bind="value: confirmationStatus, event:{ change: $parent.statusChanged}" >
                <option data-icon="" class="status-list" value="1" > Confirmed</option>
                <option class="status-list" value="2" >Reschedule</option>
                <option class="status-list" value="3" >Pending</option>
                <option class="status-list" value="0" >Not opted-in</option>
            </select>
cssbootstrap-4

Answer №1

Check out this implemented example

const picker = document.querySelector("select");
const choices = Array.from(picker.children);

// Ensure consistent color display even on reload
document.addEventListener('DOMContentLoaded', () => {
  choices.forEach((choice) => {
    if (choice.selected) {
      picker.style.color = getComputedStyle(choice).color
    }
  });
})

picker.addEventListener("change", (event) => {
  choices.forEach((choice) => {
    if (choice.selected) {
      picker.style.color = getComputedStyle(choice).color
    }
  });
});
@import "https://cdn.jsdelivr.net/gh/KunalTanwar/normalize/css/normalize.inter.min.css";
body {
  height: 100%;
  display: grid;
  place-items: center;
}

.option-status option[value="0"] {
  color: #3ea47b;
}

.option-status option[value="1"] {
  color: #3ea47b;
}

.option-status option[value="2"] {
  color: #ff0000;
}

.option-status option[value="3"] {
  color: #ffa927;
}
<select class="form-control option-status" data-bind="value: confirmationStatus, event:{ change: $parent.statusChanged}">
  <option data-icon="" class="status-list" value="1"> Confirmed</option>
  <option class="status-list" value="2">Reschedule</option>
  <option class="status-list" value="3">Pending</option>
  <option class="status-list" value="0">Not opted-in</option>
</select>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Create a box with borders and divisions using HTML

Hello, I am trying to create a box in HTML with a slanted divider line inside. How can I achieve this design? I am aiming to replicate the layout shown in this image: Link to Image I have tried implementing the code below, but the alignment is not matchi ...

htmlcss

The <span> tag creating a surprise gap following a word

Using Angular4, I've come across an odd issue where one of my span elements is adding an extra space to the end of words like this: https://i.stack.imgur.com/H4TD7.png The only CSS properties that are set include font-family, -webkit-font-smoothing, ...

htmlcss

"Help needed: The HTML dialog element is obstructing the invisible reCAPTCHA challenge popup. Any solutions for resolving this

Visit this link to access the example in incognito mode. Click on the "open" button to open the sample signin form, then click on the "Sign Up" button to trigger the challenge. There seems to be an issue with using recaptcha inside a dialog. I'm not ...

javascriptcssvue.jsrecaptchainvisible-recaptcha

Struggle with incorporating a file

As part of the login process, I have two options available: easy login and standard login. The easy login requires an employee ID, birthdate, and captcha answer, while the standard login asks for first name, last name, birthdate, and captcha. To facilitate ...

javascriptphpjqueryhtmlcss

Fast method or tool for generating a detailed CSS element list from deeply nested elements

I have been using Chrome dev tools to work on a code base that was not created by me. There are numerous deeply nested elements scattered throughout the code. I find myself having to manually search through the HTML structure in order to select them with ...

htmlcssgoogle-chrome-devtools

Changing a table cell's value when a button is clicked using Angular

I'm working with a bootstrap table that includes a button and a textbox above it. After entering a number in the textbox and clicking the generate button, I need to update the "Bill Amount" column for each row with the value from the textbox. How can ...

angularbootstrap-4

Issue encountered when assigning a CSS class to Angular component

My module contains a table structure with specific components. Here is the source code for table.component.html: <table border=1> <theader></theader> </table> The source code for theheader.component.html is as follows: <thea ...

htmlcssangular

Strategies for successfully passing and showcasing the result of a calculation on a fresh view or component within Angular

I have developed a basic calculator application with two main components: Calculator and Result. The Angular router is used to navigate between these components. Now, I am looking for a way to dynamically display the calculation result from the Calculator ...

htmlcssangulartypescriptangular-template

Is using transform scale in CSS to scale SVG sprites a valid method of scaling?

I have been using an SVG sprite as a CSS background image in this manner: .icon-arrow-down-dims { background: url("../sprite/css-svg-sprite.svg") no-repeat; background-position: 16.666666666666668% 0; width: 32px; height: 32px; display: inline-b ...

htmlcsssvg

Is it possible to exclusively target a child div using JavaScript in CSS, without affecting the parent div?

I'm in the process of developing a calendar feature where users can select a specific "day" element to access a dropdown menu for time selection. The functionality is working fine, but I've encountered an issue. When a user selects a time from th ...

javascripthtmlcss

How to Display Bootstrap4 Modal in VueJS without using Jquery

Is there a way to display a Bootstrap modal from a function in VueJS using vanilla JS? I am working on a project that only uses standard Bootstrap 4 and not BootstrapVue. //component.vue <template> <div> <button type="button" class ...

javascripttwitter-bootstrapvue.jsbootstrap-4bootstrap-modal

Tips for creating a responsive div that contains both an image and description, including automatically resizing the image to fit the

#content { background-color: #ACAE4C; float: right; display: inline-block; padding: 0; } <div id="content"> <div class="pic"></div> <div class="desc"></div> </div> I need assistan ...

htmlcssresponsive-design

Choosing the initial offspring of an element that do not share a common parent

My question might not be perfectly phrased, for which I apologize. Is there a CSS method to select only the first child of an element without affecting others that are not grouped under the same parent? For instance: <div class="parent"> <div ...

csscss-selectors

Is there a way to dynamically update an image in my CSS without having to refresh the page?

Is it possible to update an image in CSS dynamically using the value of console.log without reloading the page? function reply_click(clicked_id){ $(function() { $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': ...

phpjqueryhtmlcssajax

Include a new style in TextBoxFor

Is there a way for me to apply the form-control class to this TextBoxFor element? I'm still learning the basics of coding. <div> <div class="form-group text-center"> <Label class="center-block">Hours</Label> ...

htmlcssentity-frameworkbootstrap-4

What is the best way to center text vertically within an image?

How can I vertically align a blog entry title on an entry thumbnail image? The image size changes with the window size and the title varies in length for each entry. After finding a website that successfully achieved this effect, I tried replicating it us ...

htmlcss

Capture a screenshot of the icons

I'm curious about displaying specific parts of images in a React Native application. class InstaClone extends Component { render() { return( <View style={{ flex:1, width:100 + "%", height:100 + "%" }}> <View style={st ...

javascriptcssreactjsreact-native

Increase the size of the image while ensuring the content on the right remains proportionate

I have a challenge with managing two different sizes of images (vertical and horizontal) that need to remain the same size. I am attempting to create a container that can hold the image without affecting the surrounding content, while also possibly using o ...

phphtmlcss

How to align radio buttons in the center of a div horizontally

I am struggling to center a group of three radio buttons horizontally and have not been successful. Below is the code I am using: HTML <div class="section-wrap section-flavors"> <input id="r11" name="radio3" type="radio" value="radio_bt ...

htmlcss

Certain hues remain unaffected when changing themes, exclusive to Chrome

I have been working on a project that includes a toggle feature to switch between different themes. However, I am encountering an issue where the theme does not update properly when changing from a dark theme to a light theme or vice versa. The colors rema ...

javascripthtmlcss