- HTML Castomization of the SELECT element
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Import LmSelector style -->
<link rel="stylesheet" type="text/css" href="https://luamoris.github.io/lmSelect/lmSelect/lmSelect.css">
</head>
<body>
<!-- Your code -->
<!-- Import LmSelector script -->
<script src="https://luamoris.github.io/lmSelect/lmSelect/lmSelect.js"></script>
<!-- Your main.js -->
<script src="./main.js"></script>
</body>
</html>
index.html
<!-- Select 1 -->
<div id="formId1" class="form-group">
<div class="dropdown">
<button class="dropdown-btn" data-value="1">value 1</button>
<input type="text" name="dropdown-input" class="dropdown-input" value="">
<ul class="dropdown-list">
<li class="dropdown-item" data-value="1">value 1</li>
<li class="dropdown-item" data-value="2">value 2</li>
<li class="dropdown-item" data-value="3">value 3</li>
<li class="dropdown-item" data-value="4">value 4</li>
<li class="dropdown-item" data-value="5">value 5</li>
<li class="dropdown-item" data-value="6">value 6</li>
</ul>
</div>
</div>
<!-- Select 2 -->
<div id="formId1" class="form-group">
<div class="dropdown">
<button class="dropdown-btn" data-value="1">value 1</button>
<input type="text" name="dropdown-input" class="dropdown-input" value="">
<ul class="dropdown-list">
<li class="dropdown-item" data-value="1">value 1</li>
<li class="dropdown-item" data-value="2">value 2</li>
<li class="dropdown-item" data-value="3">value 3</li>
<li class="dropdown-item" data-value="4">value 4</li>
<li class="dropdown-item" data-value="5">value 5</li>
<li class="dropdown-item" data-value="6">value 6</li>
</ul>
</div>
</div>
main.js
function logData(data) {
console.log(data);
}
const selectorId1 = "formId1";
const selectorForm1 = new LmSelect(selectorId1);
selectorForm1.init(logData);
const selectorId2 = "formId2";
const selectorForm2 = new LmSelect(selectorId2);
selectorForm2.init(logData);
lmSelect.css
.dropdown {
box-sizing: border-box;
position: relative;
}
/* Button */
.dropdown-btn {
font-family: "Montserrat";
font-style: normal;
font-weight: 700;
font-size: 10px;
line-height: 150%;
letter-spacing: 0.02em;
text-transform: capitalize;
color: rgba(76, 179, 73, 1);
}
.dropdown-btn {
position: relative;
display: block;
box-sizing: inherit;
padding: 4px calc(6px + 16px) 4px 6px;
width: 90px;
height: 24px;
outline: none;
border: none;
text-align: left;
cursor: pointer;
border-radius: 2px;
border: 1px solid transparent;
background: rgba(76, 179, 73, 0.1);
}
.dropdown-btn:focus,
.dropdown-btn._focus {
border: 1px solid rgba(76, 179, 73, 0.2);
}
.dropdown-btn::after {
content: "";
position: absolute;
top: 50%;
right: 7px;
transform: translateY(-50%);
width: 0;
height: 0;
border-radius: 1px;
border-width: 6px 5px 0px 5px;
border-color: rgba(76, 179, 73, 1) transparent transparent transparent;
border-style: solid;
pointer-events: none;
}
.dropdown-input {
display: none;
}
/* List */
.dropdown-list {
display: none;
z-index: 1;
overflow: hidden;
position: absolute;
box-sizing: inherit;
padding: 0;
margin: 0;
width: 100%;
top: 0;
top: 24px;
list-style-type: none;
}
.dropdown-list._visible {
display: block;
}
/* Item */
.dropdown-item {
font-family: "Montserrat";
font-style: normal;
font-weight: 500;
font-size: 10px;
line-height: 150%;
letter-spacing: 0.02em;
text-transform: capitalize;
color: rgba(255, 255, 255, 0.6);
}
.dropdown-item {
box-sizing: inherit;
padding: 5px 6px;
margin: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
background: rgba(36, 37, 38, 1);
cursor: pointer;
}
.dropdown-item:hover {
color: rgba(99, 165, 234, 1);
background: rgba(40, 54, 68, 1);
}