Notice: Undefined variable: root in /users/basti1012/www/index1.php on line 41
Selektionierte Zeile anders einfärben

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.

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>