custom cssHow to use custom css
Select Input
.custom-select-input {
background: var(--background-color);
width: calc(100% - 20);
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
cursor: pointer;
overflow: hidden;
}
Select Box
.custom-select-box {
background: var(--background-color);
border-radius: var(--border-radius);
box-shadow: var(--shadow-color) 0px 5px 15px 0px;
position: absolute;
overflow: hidden;
top: 100%;
left: 0;
visibility: hidden;
opacity: 0;
transform: translateY(10px) scale(0.9);
transform-origin: top left;
transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s 0.3s;
width: 100%;
}
Select List Box
.custom-select-group-list {
overflow-y: auto;
}
Select List
.custom-select-list {
padding: 10px 16px;
font-size: 16px;
color: #4b5563;
font-weight: 500;
cursor: pointer;
display: flex;
justify-content: space-between;
transition: background 0.3s ease;
}
Search Input
.custom-select-search-input {
width: 100%;
padding: 8px 4px;
border-radius: 4px;
border: 1px solid var(--border-color);
outline: none;
}
Checkbox
.custom-select-checkbox {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 22px;
height: 22px;
border: 1px solid var(--border-color);
border-radius: 6px;
display: inline-block;
background-color: #fff;
cursor: pointer;
transition: all 0.2s ease;
}
Chip
.custom-select-chip {
background: #0a8ba1;
color: #fff;
padding: 4px 8px;
border-radius: 16px;
font-size: 15px;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}