HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link
        href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;600;700;800;900&family=Poppins:wght@400;500;600;700;800;900&display=swap"
        rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <title>Custom select options box with javaScript</title>

</head>

<body>
    <div class="main-div">
        <label>Select Platform</label>
        <div class="custom-select-box">
            <select class="form-control">
                <option class="d-none">Select</option>
                <option value="1">w3coderschool</option>
                <option value="2">W3School</option>
                <option value="3">Tutorial Point</option>
            </select>
        </div>
    </div>
</body>

</html>

CSS

body {
	min-height: 100vh;
	display: grid;
	place-items: center;
}

.main-div {
	width: 100%;
	max-width: 375px;
}

label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: #333;
	margin-bottom: 5px;
}

.custom-select-box {
	position: relative;
	border: 1.25px solid #dfdfdf;
	border-radius: 5px;
	color: #a9a9a9 !important;
}

.custom-select-box select {
	display: none;
}

.select-selected {
	border: 1.25px solid #dfdfdf;
	border-radius: 5px;
}

.select-selected:after {
	position: absolute;
	content: url("https://www.teknowize.com/attachments/file_1659477036.svg");
	top: 50%;
	right: 23px;
	transform: translateY(-50%);
}
.select-items div,
.select-selected {
	color: #000000;
	padding: 8px 16px;
	border: none;
	background: #ffffff;
	cursor: pointer;
	user-select: none;
	font-size: 15px;
	font-weight: 500;
}
.select-items {
	margin-top: 0.2rem;
	position: absolute !important;
	border: 1.25px solid #dfdfdf;
	border-radius: 5px;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 99;
	width: 100%;
}
.select {
	display: none;
}

.select-items div:hover,
.same-as-selected {
	background: #f2f2f2;
}

document.addEventListener("DOMContentLoaded", function () {
    // Select all elements with the class "custom-select-box"
    const selectBoxes = document.getElementsByClassName("custom-select-box");

Array.from(selectBoxes).forEach((box) => {
        const selectElement = box.getElementsByTagName("select")[0];
        const selectedDiv = document.createElement("DIV");
        selectedDiv.className = "select-selected";
        selectedDiv.innerHTML = selectElement.options[selectElement.selectedIndex].innerHTML;
        box.appendChild(selectedDiv);

// Create a container for option items
        const optionsContainer = document.createElement("DIV");
        optionsContainer.className = "select-items select";

// Populate options container with options from the original select element
        Array.from(selectElement.options).forEach((option, index) => {
            if (index === 0) return; // Skip the first option as it is the selected item

const optionDiv = document.createElement("DIV");
            optionDiv.innerHTML = option.innerHTML;
            optionDiv.addEventListener("click", function () {
                updateSelectedOption(selectElement, selectedDiv, optionsContainer, optionDiv);
                alert(`You selected: ${option.innerHTML}`);
            });
            optionsContainer.appendChild(optionDiv);
        });
        box.appendChild(optionsContainer);

selectedDiv.addEventListener("click", function (event) {
            event.stopPropagation();
            closeAllSelectBoxes(selectedDiv);
            optionsContainer.classList.toggle("select");
            selectedDiv.classList.toggle("select-arrow-active");
        });
    });

// Close all select boxes except the current one
    function closeAllSelectBoxes(exceptElement) {
        const allOptionsContainers = document.getElementsByClassName("select-items");
        const allSelectedDivs = document.getElementsByClassName("select-selected");

Array.from(allOptionsContainers).forEach((container, index) => {
            if (allSelectedDivs[index] !== exceptElement) {
                container.classList.add("select");
                allSelectedDivs[index].classList.remove("select-arrow-active");
            }
        });
    }

// Update the selected option and close the dropdown
    function updateSelectedOption(selectElement, selectedDiv, optionsContainer, optionDiv) {
        selectElement.selectedIndex = Array.from(selectElement.options).findIndex(
            (opt) => opt.innerHTML === optionDiv.innerHTML
        );
        selectedDiv.innerHTML = optionDiv.innerHTML;

Array.from(optionsContainer.getElementsByClassName("same-as-selected")).forEach((el) =>
            el.classList.remove("same-as-selected")
        );
        optionDiv.classList.add("same-as-selected");

selectedDiv.click(); // Close the dropdown
    }

// Close all select boxes when clicking outside
    document.addEventListener("click", closeAllSelectBoxes);
});

Custom select options box with javaScript