纯css+js自制下拉框

前提

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

代码

html

<div class="pos-rel">
	<div id="select" class="select get-select"><span class="get-lang">Portuguesespan>
		<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)">Englishli>
			<li class="my-li portuguese" onclick="changeSelect(2)">Portugueseli>
		ul>
	div>
div>
1
2
3
4
5
6
7
8
9
10
11

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
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

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];
    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).on('click', function () {
        if (hasClass(options, "my-show")) {
            removeClass(options, "my-show");
            addClass(options, "my-hidden");
        }
    })
}
//language down
function changeSelectLanguage(inner) {
    let langArr = document.getElementsByClassName('get-lang');
    langArr[0].innerHTML = inner;
}
window.onload = function () {
	languageButton();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52