Custom select box with each option a different color

Wesley10 · October 31, 2021

Is there a way to do this tutorial but to have each option as a different color? It's for a color selection on a form. So it also has to function as a form.

https://www.w3schools.com/howto/howto_custom_select.asp

Any help is appreciated.

Ingolme · October 31, 2021

You can use the nth-child selector to choose any element and give it a different background color.

.select-items div:nth-child(1) { background-color: #F00; }

.select-items div:nth-child(2) { background-color: #0F0; }

dsonesuk · November 2, 2021

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/*the container must be positioned relative:*/
.custom-select {
  position: relative;
  font-family: Arial;
}

.custom-select select {
  display: none; /*hide original SELECT element:*/
}

.select-selected {
  background-color: DodgerBlue;
}

/*style the arrow inside the select element:*/
.select-selected:after {
  position: absolute;
  content: "";
  top: 17px;  /*amended dsonesuk*/
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #fff transparent transparent transparent;
}

/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
  /*border-color: transparent transparent #fff transparent; dsonesuk*/
  top: 10px; /*amended dsonesuk*/
  transform: rotate(180deg);  /*added dsonesuk*/
}

/*style the items (options), including the selected item:*/
.select-items div,.select-selected {
  color: #ffffff;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
  user-select: none;
}

/*style items (options):*/
.select-items {
  position: absolute;
  background-color: DodgerBlue;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}

/*hide the items when the select box is closed:*/
.select-hide {
  display: none;
}

.select-items div:hover, .same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}

/* added dsonesuk */
.custom-select [data-custoptcol="CustOptCol1"] {
background: red;
color: #fff;
}
.custom-select [data-custoptcol="CustOptCol2"] {
background: orange;
color: #000;

}

.custom-select [data-custoptcol="CustOptCol3"]{
background: yellow;
color: #000;
}

.custom-select [data-custoptcol="CustOptCol4"] {
background: green;
color: #fff;
}

.custom-select [data-custoptcol="CustOptCol5"] {
background: blue;
color: #fff;
}

.custom-select [data-custoptcol="CustOptCol6"] {
background: indigo;
color: #fff;
}

.custom-select [data-custoptcol="CustOptCol7"] {
background: violet;
color: #000;
}

/* change pointer color to match black text */
.custom-select [data-custoptcol="CustOptCol2"]:after,
.custom-select [data-custoptcol="CustOptCol3"]:after,
.custom-select [data-custoptcol="CustOptCol7"]:after {
border-color: #000 transparent transparent transparent;
}
</style>
</head>     

<body>

<h2>Custom Select</h2>

<!--surround the select box with a "custom-select" DIV element. Remember to set the width:-->
<div class="custom-select" style="width:200px;">
  <select>
    <option value="0">Select car:</option>
    <option value="1">Audi</option>
    <option value="2">BMW</option>
    <option value="3">Citroen</option>
    <option value="4">Ford</option>
    <option value="5">Honda</option>
    <option value="6">Jaguar</option>
    <option value="7">Land Rover</option>
    <option value="8">Mercedes</option>
    <option value="9">Mini</option>
    <option value="10">Nissan</option>
    <option value="11">Toyota</option>
    <option value="12">Volvo</option>
  </select>
</div>

<script>
var x, i, j, l, ll, selElmnt, a, b, c;
/*look for any elements with the class "custom-select":*/
x = document.getElementsByClassName("custom-select");
l = x.length;
for (i = 0; i < l; i++) {
  selElmnt = x[i].getElementsByTagName("select")[0];
  ll = selElmnt.length;
  /*for each element, create a new DIV that will act as the selected item:*/
  a = document.createElement("DIV");
  a.setAttribute("class", "select-selected");
  a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
  x[i].appendChild(a);
  /*for each element, create a new DIV that will contain the option list:*/
  b = document.createElement("DIV");
  b.setAttribute("class", "select-items select-hide");
  for (j = 1; j < ll; j++) {
    /*for each option in the original select element,
    create a new DIV that will act as an option item:*/
    c = document.createElement("DIV");
    c.innerHTML = selElmnt.options[j].innerHTML;
    /* add custom data- attribute with index ref for each custom option div - added dsonesuk*/
    c.setAttribute("data-custoptcol","CustOptCol"+j)
    c.addEventListener("click", function(e) {
        /*when an item is clicked, update the original select box,
        and the selected item:*/
        var y, i, k, s, h, sl, yl;
        s = this.parentNode.parentNode.getElementsByTagName("select")[0];
        sl = s.length;
        h = this.parentNode.previousSibling;
        
        for (i = 0; i < sl; i++) {
          if (s.options[i].innerHTML == this.innerHTML) {
            s.selectedIndex = i;
            h.innerHTML = this.innerHTML;
            /*set custom data- and retrive selected data- value -  added dsonesuk*/
            h.setAttribute("data-custoptcol", this.getAttribute("data-custoptcol"));
            y = this.parentNode.getElementsByClassName("same-as-selected");
            yl = y.length;
            for (k = 0; k < yl; k++) {
              y[k].removeAttribute("class");
            }
            this.setAttribute("class", "same-as-selected");
            break;
          }
        }
        h.click();
    });
    b.appendChild(c);
  }
  x[i].appendChild(b);
  a.addEventListener("click", function(e) {
      /*when the select box is clicked, close any other select boxes,
      and open/close the current select box:*/
      e.stopPropagation();
      closeAllSelect(this);
      this.nextSibling.classList.toggle("select-hide");
      this.classList.toggle("select-arrow-active");
    });
}
function closeAllSelect(elmnt) {
  /*a function that will close all select boxes in the document,
  except the current select box:*/
  var x, y, i, xl, yl, arrNo = [];
  x = document.getElementsByClassName("select-items");
  y = document.getElementsByClassName("select-selected");
  xl = x.length;
  yl = y.length;
  for (i = 0; i < yl; i++) {
    if (elmnt == y[i]) {
      arrNo.push(i)
    } else {
      y[i].classList.remove("select-arrow-active");
    }
  }
  for (i = 0; i < xl; i++) {
    if (arrNo.indexOf(i)) {
      x[i].classList.add("select-hide");
    }
  }
}
/*if the user clicks anywhere outside the select box,
then close all select boxes:*/
document.addEventListener("click", closeAllSelect);
</script>

</body>
</html>

Wesley10 · November 5, 2021

Thanks Dsonesuk! It looks great!

Edited November 5, 2021 by Wesley10

Sign In

Custom select box with each option a different color

Recommended Posts

Wesley10

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Wesley10

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity