Selektionierte Zeile anders einfärben

Hallo Zusammen Ich möchte gerne beim Kontaktformular den blauen Balken beim Feld ART eine andere Farbe haben. Den die Hauptfarben sind: Schwarz/Rot/Gold. Darum möchte ich den Balken auch so die Farbe haben. Gibt es eine Liste der CSS Befehle für die Combobox Formatierung.
Kommentar abgeben zu diesen Beitrag/Code ?
Dann hier klicken

Der hier verwendete Code

<style> body { background-color: #000000; } .tt-select { position: relative; height: auto; padding: 0px; margin-bottom: 30px; text-align: left; } .tt-select select { display: none; } .select-selected { background-color:blue; color:white; border:1px solid white; color: rgba(220, 220, 220, 1) !important; } .select-selected:after { position: absolute; content: ""; top: 14px; right: 10px; width: 0; height: 0; border: 6px solid transparent; } .select-selected:before { position: absolute; content: ""; top: 18px; right: 10px; width: 0; height: 0; border: 6px solid transparent; border-color: transparent transparent #000000 transparent; transform: rotate(180deg); } .select-selected.select-arrow-active:before { border: none; } .select-selected.select-arrow-active:after { border-color: transparent transparent #000000 transparent; top: 10px; } .select-items div,.select-selected { color: #ffffff; padding: 8px 16px; border: 1px solid #333333; cursor: pointer; } .select-items { position: absolute; background-color: blue; top: 100%; left: 0; right: 0; z-index: 99; } .select-hide { display: none; } .same-as-selected { background-color:green; } .select-items div:hover{ background-color:red; } </style> <div class="tt-select"> <select> <option value="0">Options</option> <option value="1">Option One</option> <option value="2">Option Two</option> <option value="3">Option Three</option> <option value="4">Option Four</option> </select> </div> <script> var x, i, j, selElmnt, a, b, c; x = document.getElementsByClassName("tt-select"); for (i = 0; i < x.length; i++) { selElmnt = x[i].getElementsByTagName("select")[0]; a = document.createElement("DIV"); a.setAttribute("class", "select-selected"); a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML; x[i].appendChild(a); b = document.createElement("DIV"); b.setAttribute("class", "select-items select-hide"); for (j = 0; j < selElmnt.length; 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; c.addEventListener("click", function(e) { var y, i, k, s, h; s = this.parentNode.parentNode.getElementsByTagName("select")[0]; h = this.parentNode.previousSibling; for (i = 0; i < s.length; i++) { if (s.options[i].innerHTML == this.innerHTML) { s.selectedIndex = i; h.innerHTML = this.innerHTML; y = this.parentNode.getElementsByClassName("same-as-selected"); for (k = 0; k < y.length; 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) { e.stopPropagation(); closeAllSelect(this); this.nextSibling.classList.toggle("select-hide"); this.classList.toggle("select-arrow-active"); }); } function closeAllSelect(elmnt) { var x, y, i, arrNo = []; x = document.getElementsByClassName("select-items"); y = document.getElementsByClassName("select-selected"); for (i = 0; i < y.length; i++) { if (elmnt == y[i]) { arrNo.push(i) } else { y[i].classList.remove("select-arrow-active"); } } for (i = 0; i < x.length; i++) { if (arrNo.indexOf(i)) { x[i].classList.add("select-hide"); } } } document.addEventListener("click", closeAllSelect); </script>