Question 161259 in Html Question posted in
Some basic documentation can be found here.

Can HTML, CSS & JavaScript be used to create an element that allows users to change their status?

I am creating an element on a website in which the user will be able to update the status of a job/order.

The best way that I found to make this work is by creating a drop down list and then styling it.

HTML

<select name="status" id="status">
      <option value="Completed">Completed</option>
      <option value="Incomplete">Incomplete</option>
</select>

CSS

#status {
   width: 100px;
   height: 20px;

   background-color: green;
   color: lightgreen;

   font-size: 18px;
   text-align: center;
}

While this all works well, my main issue is that I would like the background and font colour of the actual select box to change depending on the option selected. I.e, if "Incomplete" was to be selected "background-color" would change to "orange" and "color" would change to "lightcoral".

Tags:

6

Answers


  1. 0

    You have to use a little javascript to do it, maybe the simplest way is to add a class for complete and not complete state, here is an example

    It only reacts when you change de value, you could do more adding an empty state, a pre selected value, you can customize it… this is just an example of how to toggle classes.

    Good luck!

    const status = document.getElementById("status");

status.addEventListener("change", () => {
    if (status.value === "Completed") {
    status.classList.add("completed");
    status.classList.remove("not-completed");
  } else {
    status.classList.add("not-completed");
    status.classList.remove("completed");
  }
});
    #status {
   width: 100px;
   height: 20px;

   background-color: green;
   color: lightgreen;

   font-size: 18px;
   text-align: center;
}

#status.completed {
  background-color: blue;
}

#status.not-completed {
  background-color: red;
}
    <select name="status" id="status">
      <option value="Completed">Completed</option>
      <option value="Incomplete">Incomplete</option>
</select>
    Login or Signup to reply.
  2. 0

    You will need to use JavaScript to listen for the change event on the select element and update the styling accordingly.

    May be try something like this:

    <select name="status" id="status">
  <option value="Completed">Completed</option>
  <option value="Incomplete">Incomplete</option>
 </select>

    the CSS:

    #status {
  background-color: green;
  color: lightgreen;
}

#status.incomplete {
  background-color: orange;
  color: lightcoral;
}

    Then the javascript:

    const statusSelect = document.getElementById("status");
statusSelect.addEventListener("change", function() {
  if (this.value === "Incomplete") {
    this.classList.add("incomplete");
  } else {
    this.classList.remove("incomplete");
  }
});
    Login or Signup to reply.
  3. 0

    This should work:

    option:checked {
 color: lightcoral;
 background-color: orange;
}

    EDIT:
    I wrote #status instead of the option tag.

    NOTE
    This is gonna change EVERY option that is selected on the page, to make it change only in that select you have to do like this:

    #status > option:checked {
 color: lightcoral;
 background-color: orange;
}
    Login or Signup to reply.
  4. 0

    You need js logic to change style based on selected value.

    Example:

    function updateSelect(e) {
  if (e.value == "Incomplete") {
    e.style.background = 'orange';
    e.style.color = 'lightcoral';
  } else {
    e.style.background = 'green';
    e.style.color = 'lightgreen';
  }
}
    #status {
  width: 100px;
  height: 20px;

  background-color: green;
  color: lightgreen;

  font-size: 18px;
  text-align: center;
}
    <select name="status" id="status" onchange="updateSelect(this)">
  <option value="Completed">Completed</option>
  <option value="Incomplete">Incomplete</option>
</select>
    Login or Signup to reply.
  5. 0

    Using Javascript, attaching a change event listener to the dropdown and evaluating the value to change styling will work. Below is a way of pre-defining the CSS styles by class names. This would also make it easier if you wanted to add more options to the dropdown or if the dropdown style grows.

    I also added a prompt option with no value as a default style. Needed, probably not but left it in as an alternative.

    const statusDropdown = document.querySelector("#status");

statusDropdown.addEventListener("change", (event) => {
  value = statusDropdown.value;
     
  if (value === "Completed") {
    statusDropdown.classList.remove("status-incomplete"); 
    statusDropdown.classList.add("status-complete");
    
  } else if (value === "Incomplete") {
    statusDropdown.classList.remove("status-complete");
    statusDropdown.classList.add("status-incomplete"); 
  } else {
    statusDropdown.className = "";
  }
});
    #status {
   width: 100px;
   height: 20px;
   font-size: 18px;
   text-align: center;
}

.status-default {
/*  default styles  */
}

.status-complete {
   background-color: green;
   color: lightgreen;
}

.status-incomplete {
   background-color: orange;
   color: lightcoral;
}
    <select name="status" id="status" class="status-default">
      <option value="">Select</option>
      <option value="Completed">Completed</option>
      <option value="Incomplete">Incomplete</option>
</select>
    Login or Signup to reply.
  6. 0

    With just CSS you can style it with has() and :checked

    select {
  background-color: red;
}

select:has(option[value="Completed"]:checked) {
  background-color: green;
  color: yellow;
}
    <select name="status" id="status">
  <option value="Completed">Completed</option>
  <option value="Incomplete">Incomplete</option>
</select>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search