mclarenmervin · February 8, 2025 12:19
diff --git a/option-select-custom-design-html-css-js.html b/option-select-custom-design-html-css-js.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Select Dropdown</title>
    <style>
        /* Select field */
        .sotw-gender-field-wrap,
        .wc_bookings_field_resource {
            position: relative;
            height: auto;
            padding: 0px;
            margin-bottom: 30px;
            text-align: left;
        }
        .sotw-gender-field-wrap select,
        .wc_bookings_field_resource select {
            display: none;
        }
        .select-selected {
            background-color: #fff;
            color: rgba(0, 0, 0, 0.8) !important;
            padding: 8px 16px;
            border: 1px solid #333;
            cursor: pointer;
            position: relative;
            display: block;
        }
        .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: #313131;
            top: 100%;
            left: 0;
            right: 0;
            z-index: 99;
        }
        .select-hide {
            display: none;
        }
        .select-items div:hover, .same-as-selected {
            background-color: rgba(0, 0, 0, 0.1);
        }
    </style>
 </head>
 <body>

    <div class="sotw-gender-field-wrap">
        <select>
            <option value="male">Male</option>
            <option value="female">Female</option>
            <option value="other">Other</option>
        </select>
    </div>

    <div class="wc_bookings_field_resource">
        <select>
            <option value="resource1">Resource 1</option>
            <option value="resource2">Resource 2</option>
            <option value="resource3">Resource 3</option>
        </select>
    </div>

    <script>
        var x, i, j, selElmnt, a, b, c;
        x = document.querySelectorAll(".sotw-gender-field-wrap, .wc_bookings_field_resource");

        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++) {
                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.includes(i)) {
                    x[i].classList.add("select-hide");
                }
            }
        }

        document.addEventListener("click", closeAllSelect);
    </script>

 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Custom Select Dropdown</title>
	<style>
	/* Select field */
	.sotw-gender-field-wrap,
	.wc_bookings_field_resource {
	position: relative;
	height: auto;
	padding: 0px;
	margin-bottom: 30px;
	text-align: left;
	}
	.sotw-gender-field-wrap select,
	.wc_bookings_field_resource select {
	display: none;
	}
	.select-selected {
	background-color: #fff;
	color: rgba(0, 0, 0, 0.8) !important;
	padding: 8px 16px;
	border: 1px solid #333;
	cursor: pointer;
	position: relative;
	display: block;
	}
	.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: #313131;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 99;
	}
	.select-hide {
	display: none;
	}
	.select-items div:hover, .same-as-selected {
	background-color: rgba(0, 0, 0, 0.1);
	}
	</style>
	</head>
	<body>

	<div class="sotw-gender-field-wrap">
	<select>
	<option value="male">Male</option>
	<option value="female">Female</option>
	<option value="other">Other</option>
	</select>
	</div>

	<div class="wc_bookings_field_resource">
	<select>
	<option value="resource1">Resource 1</option>
	<option value="resource2">Resource 2</option>
	<option value="resource3">Resource 3</option>
	</select>
	</div>

	<script>
	var x, i, j, selElmnt, a, b, c;
	x = document.querySelectorAll(".sotw-gender-field-wrap, .wc_bookings_field_resource");

	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++) {
	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.includes(i)) {
	x[i].classList.add("select-hide");
	}
	}
	}

	document.addEventListener("click", closeAllSelect);
	</script>

	</body>
	</html>