Customizing the background color of an option using HTML and CSS

Question

Customizing the background color of an option using HTML and CSS

I am currently developing an option form where each selection will appear in a different color as the user scrolls down. Once a selection is made, it should be saved and displayed with the chosen color.

https://i.sstatic.net/gvdpt.png

My goal is to save the form, return to the page later, and see my previously selected options along with their associated colors (similar to what is shown in 2021). How can I ensure that the selected option box retains the color of the choice from the drop-down list? What steps should I take to ensure that the selection persists when revisiting the page?

HTML

<form action="" method="post">
{% csrf_token %}
        {% for year in years %}
        <select name="rating" id="{{year.id}}">
        <script src="{% static 'SCS/scripts/script.js' %}"/></script> 
            <option>Choose From List</option>
            <option class=green value="green">High</option>
            <option class=yellow value="yellow">Medium</option>
            <option class=orange value="orange">Low</option>
            <option class=gray value="gray">N/A</option>
        </select> 
            <input type="hidden" name="year" value={{year.fy_year}}>
        {% endfor %}
        <input id=save_cap type="submit" value="Save">
      </form>

CSS

.green{
    background-color: green;
}

.yellow{
    background-color: yellow;
}

.orange{
    background-color: orangered;
}

.gray{
    background-color: gray;
}

javascript css html css-selectors

Answer 1

Answer №1

If you want to achieve your objectives, utilizing JavaScript is essential.

In order to ensure that the selected box option corresponds to the color of the dropdown option, you can use the following code:

document.getElementById("rating").addEventListener("change", function() {
    this.className = this.value;
});

This snippet captures the chosen option value and applies it as a class name to the select element. To make it functional, remember to assign values to each option:

<select name="rating" id="rating">
    <option class=white value="white">Choose From List</option>
    <option class=green value="green">High</option>
    <option class=yellow value="yellow">Medium</option>
    <option class=orange value="orange">Low</option>
    <option class=gray value="gray">N/A</option>
</select>

To store the selected option, you will need to utilize localStorage:

let selected = localStorage.getItem("selected");
let rating = document.getElementById("rating");

if (selected) {
    rating.selectedIndex = selected;
    rating.className = rating.value;
}

rating.addEventListener("change", function() {
    localStorage.setItem("selected", this.selectedIndex);
    this.className = this.value;
});

View the working JSFiddle here.

Answer 2

If you want to achieve your objectives, utilizing JavaScript is essential.

In order to ensure that the selected box option corresponds to the color of the dropdown option, you can use the following code:

document.getElementById("rating").addEventListener("change", function() {
    this.className = this.value;
});

This snippet captures the chosen option value and applies it as a class name to the select element. To make it functional, remember to assign values to each option:

<select name="rating" id="rating">
    <option class=white value="white">Choose From List</option>
    <option class=green value="green">High</option>
    <option class=yellow value="yellow">Medium</option>
    <option class=orange value="orange">Low</option>
    <option class=gray value="gray">N/A</option>
</select>

To store the selected option, you will need to utilize localStorage:

let selected = localStorage.getItem("selected");
let rating = document.getElementById("rating");

if (selected) {
    rating.selectedIndex = selected;
    rating.className = rating.value;
}

rating.addEventListener("change", function() {
    localStorage.setItem("selected", this.selectedIndex);
    this.className = this.value;
});

View the working JSFiddle here.

Answer 3

Answer №2

My expertise lies in jQuery, so delving into this has been quite enlightening for me. Nonetheless, I've managed to come up with a solution for you. Let's walk through my thought process, and below is the code snippet (it seems to only work locally and on the w3 demo due to cookies):

Begin by adding values to the options:
```
<option class="green" value="high">High</option>
```
for easy retrieval and storage of values in a cookie by clicking here
Attach a change event listener to change colors, with s as follows:
```
s.addEventListener('change', changeColor);
```
Change the color using
```
this.className += this.selectedOptions[0].className;
```
. More details can be found here
Save the information in a cookie with setCookie(this.id, this.value);. Further insights available here

With color changes and stored cookies in place, we must load any stored values upon document ready. Here's how:

let cookie = getCookie(`select-${s.id}`);
        // if cookie is not empty, set selected option and change color
        if (cookie != '') {
            s.value = cookie;
            s.className += s.selectedOptions[0].className;
        }

Now we have:

Dynamic color changing
Saved values
Loaded values

The other answer may introduce a more efficient, compact method of achieving this. Nevertheless, I trust that the provided links will enhance your understanding of the concept :)

// Setting up onChange event listeners
function setSelectOnChangeListeners() {
  // Retrieve all <select> elements
  const selects = document.getElementsByTagName("select");

  // For each <select> element
  for (s of selects) {
    // Add an onChange event listener to trigger function changeColor();
    s.addEventListener('change', changeColor);
  }
}

// Change color upon <select> onChange event based on selected option color class
function changeColor() {
  console.log(`class = ${this.selectedOptions[0].className}`);

  this.className = '';
  this.className += this.selectedOptions[0].className;

  setCookie(this.id, this.value);
}

// Format cookies as "select-<id> = <val>"
function setCookie(id, val) {
  document.cookie = `select-${id}=${val}`;
  console.log(`Cookie data set for ${id}, ${val}`);
}

// W3 method for getting cookies
function getCookie(cname) {
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for (var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

// On document load
document.addEventListener('DOMContentLoaded', function(event) {
  // Load cookie data for each select element
  const selects = document.getElementsByTagName("select");
  for (s of selects) {
    let id = s.id;
    let cookie = getCookie(`select-${s.id}`);

    if (cookie != '') {
      s.value = cookie;
      s.className += s.selectedOptions[0].className;
    }
  }

  // Set event listeners
  setSelectOnChangeListeners();
});

.green {
  background-color: green
}

.yellow {
  background-color: #ff0
}

.orange {
  background-color: #ff4500
}

.gray {
  background-color: gray
}

<select id="2020" name="rating">
   <option>Choose From List</option>
   <option class="green" value="high">High</option>
   <option class="yellow" value="medium">Medium</option>
   <option class="orange" value="low">Low</option>
   <option class="gray" value="none">N/A</option>
</select>

<select id="2021" name="rating">
   <option>Choose From List</option>
   <option class="green" value="high">High</option>
   <option class="yellow" value="medium">Medium</option>
   <option class="orange" value="low">Low</option>
   <option class="gray" value="none">N/A</option>
</select>

Answer 4

My expertise lies in jQuery, so delving into this has been quite enlightening for me. Nonetheless, I've managed to come up with a solution for you. Let's walk through my thought process, and below is the code snippet (it seems to only work locally and on the w3 demo due to cookies):

Begin by adding values to the options:
```
<option class="green" value="high">High</option>
```
for easy retrieval and storage of values in a cookie by clicking here
Attach a change event listener to change colors, with s as follows:
```
s.addEventListener('change', changeColor);
```
Change the color using
```
this.className += this.selectedOptions[0].className;
```
. More details can be found here
Save the information in a cookie with setCookie(this.id, this.value);. Further insights available here

With color changes and stored cookies in place, we must load any stored values upon document ready. Here's how:

let cookie = getCookie(`select-${s.id}`);
        // if cookie is not empty, set selected option and change color
        if (cookie != '') {
            s.value = cookie;
            s.className += s.selectedOptions[0].className;
        }

Now we have:

Dynamic color changing
Saved values
Loaded values

The other answer may introduce a more efficient, compact method of achieving this. Nevertheless, I trust that the provided links will enhance your understanding of the concept :)

// Setting up onChange event listeners
function setSelectOnChangeListeners() {
  // Retrieve all <select> elements
  const selects = document.getElementsByTagName("select");

  // For each <select> element
  for (s of selects) {
    // Add an onChange event listener to trigger function changeColor();
    s.addEventListener('change', changeColor);
  }
}

// Change color upon <select> onChange event based on selected option color class
function changeColor() {
  console.log(`class = ${this.selectedOptions[0].className}`);

  this.className = '';
  this.className += this.selectedOptions[0].className;

  setCookie(this.id, this.value);
}

// Format cookies as "select-<id> = <val>"
function setCookie(id, val) {
  document.cookie = `select-${id}=${val}`;
  console.log(`Cookie data set for ${id}, ${val}`);
}

// W3 method for getting cookies
function getCookie(cname) {
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for (var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

// On document load
document.addEventListener('DOMContentLoaded', function(event) {
  // Load cookie data for each select element
  const selects = document.getElementsByTagName("select");
  for (s of selects) {
    let id = s.id;
    let cookie = getCookie(`select-${s.id}`);

    if (cookie != '') {
      s.value = cookie;
      s.className += s.selectedOptions[0].className;
    }
  }

  // Set event listeners
  setSelectOnChangeListeners();
});

.green {
  background-color: green
}

.yellow {
  background-color: #ff0
}

.orange {
  background-color: #ff4500
}

.gray {
  background-color: gray
}

<select id="2020" name="rating">
   <option>Choose From List</option>
   <option class="green" value="high">High</option>
   <option class="yellow" value="medium">Medium</option>
   <option class="orange" value="low">Low</option>
   <option class="gray" value="none">N/A</option>
</select>

<select id="2021" name="rating">
   <option>Choose From List</option>
   <option class="green" value="high">High</option>
   <option class="yellow" value="medium">Medium</option>
   <option class="orange" value="low">Low</option>
   <option class="gray" value="none">N/A</option>
</select>

Customizing the background color of an option using HTML and CSS

Answer №1

Answer №2

Similar questions

Exploring the capabilities of querying HTML using XPath with Python's lxml library

IE9 crashes when displaying elements with float:left style

How can I create a JSON output from my MySQL database that includes the total count of records per day for a Task entry?

Using es6 map to deconstruct an array inside an object and returning it

Why is it that this particular line of code sometimes gives me an "undefined" result before returning an actual value?

While attempting to upload a file in my Mocha Node.js test, I encountered the message: "Received [Object null prototype] { file: { ... }}"

What is the methodology behind incorporating enumerations in typescript?

How to incorporate sound files in JavaScript

Managing empty props in React applications

Displaying TestNG Reporter information in Gradle-generated HTML test reports

Can a webpage be redirected to another page while passing along the id from the original page?

What is the best way to align a div right below an image that has been clicked on?

Optimal method for creating a seamless loop of animated elements passing through the viewport

How can I ensure that my content stays fixed at the bottom of a scrolling div in Material UI React?

The method for retrieving values and $id from a $firebaseArray using angularJS

Click on the radio button to delete all selected entries in the option dropdown

Having issues with Sencha Touch not initiating in mobile browsers

The Javascript slider fails to function properly when utilizing AJAX to load the page

Content escapes its parent container and seamlessly transitions to the following element

Simulating an ES6 module that returns a factory function for moment.js