Create an element that allows user to change status - HTML, CSS and JavaScript

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".

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;
}

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

Example:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function updateSelect(e) {
  if (e.value == "Incomplete") {
    e.style.background = 'orange';
    e.style.color = 'lightcoral';
  } else {
    e.style.background = 'green';
    e.style.color = 'lightgreen';
  }
}

<!-- language: lang-css -->

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

   background-color: green;
   color: lightgreen;

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

<!-- language: lang-html -->

<select name="status" id="status" onchange="updateSelect(this)">
  <option value="Completed">Completed</option>
  <option value="Incomplete">Incomplete</option>
</select>

<!-- end snippet -->

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!

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

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");
  }
});

<!-- language: lang-css -->

#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;
}

<!-- language: lang-html -->

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

<!-- end snippet -->

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");
  }
});

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.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

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 = "";
  }
});

<!-- language: lang-css -->

#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;
}

<!-- language: lang-html -->

<select name="status" id="status" class="status-default">
      <option value="">Select</option>
      <option value="Completed">Completed</option>
      <option value="Incomplete">Incomplete</option>
</select>

<!-- end snippet -->

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

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

select {
  background-color: red;
}

select:has(option[value="Completed"]:checked) {
  background-color: green;
  color: yellow;
}

<!-- language: lang-html -->

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

<!-- end snippet -->