纯css+js自制下拉框

前提

因为html的select标签，下拉框自定义程度非常的低，为了贴合而项目ui显示，所以打算自制下拉框

代码

html

<div class="pos-rel"><div id="select" class="select get-select"><span class="get-lang">Portuguese</span><img src="./img/down_arrow.webp" width="14px" height="14px" alt="down_arrow"></div><div class="m-b-10"><ul id="options" class="get-option my-hidden"><li class="my-li english" onclick="changeSelect(1)">English</li><li class="my-li portuguese" onclick="changeSelect(2)">Portuguese</li></ul></div>
</div>

css

.pos-rel {position: relative
}.pos-abs {position: absolute;top: 20px
}.my-show {opacity: inherit !important;visibility: inherit !important;width: 150px !important;text-align: center;left: -45px !important;top: 70px !important;background-color: #fff !important;transition: inherit !important;animation-name: dropdown-animation !important;animation-duration: .3s !important;animation-fill-mode: forwards !important
}.my-hidden {opacity: 0 !important;visibility: hidden !important;display: none !important
}
.select {outline: 0;border: 0;color: #263a4f;font-size: 14px;font-weight: 600;line-height: 80px;cursor: pointer
}
.my-li {border-bottom: 0 !important;color: #009aab !important;padding: 10px !important;cursor: pointer;border: #009aab1a 1px solid !important
}.my-li:hover {border-bottom: 0 !important;color: #fff !important;padding: 10px !important;cursor: pointer;background-color: #009aab !important;border: #009aab1a 1px solid !important
}

js

function changeSelect(lang) {if (lang == 1 ) {changeSelectLanguage("English");} else if (lang == 2 ) {changeSelectLanguage("Portuguese"); }
}//isexcist
function hasClass(ele, cls) {return ele.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
}
// //add
function addClass(ele, cls) {if (!hasClass(ele, cls)) ele.className += " " + cls;
}
// //remove
function removeClass(ele, cls) {if (hasClass(ele, cls)) {var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");ele.className = ele.className.replace(reg, " ");}
}
// two language
function languageButton() {var options = document.getElementsByClassName('get-option')[0];var options1 = document.getElementsByClassName('get-option')[1];document.getElementsByClassName('get-select')[0].onclick = function (e) {if (hasClass(options, "my-show")) {removeClass(options, "my-show");addClass(options, "my-hidden");} else {addClass(options, "my-show");removeClass(options, "my-hidden");}e.stopPropagation();}document.getElementsByClassName('get-select')[1].onclick = function (e) {if (hasClass(options1, "my-show")) {removeClass(options1, "my-show");addClass(options1, "my-hidden");} else {addClass(options1, "my-show");removeClass(options1, "my-hidden");}e.stopPropagation();}$(document).on('click', function () {if (hasClass(options, "my-show")) {removeClass(options, "my-show");addClass(options, "my-hidden");}if (hasClass(options1, "my-show")) {removeClass(options1, "my-show");addClass(options1, "my-hidden");}})
}
//language down
function changeSelectLanguage(inner) {let langArr = document.getElementsByClassName('get-lang');for (let i = 0; i < langArr.length; i++) {langArr[i].innerHTML = inner;}
}
window.onload = function () {languageButton();
}