_custom_select.scss
1.96 KB
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
54
55
56
57
58
59
60
61
/* The container must be positioned relative: */
.custom-select {
position: relative;
font-family: 'Helvetica';
}
.custom-select select {
display: none; /*hide original SELECT element: */
}
.select-selected {
background-color: white;
border-top:1px solid #707070 !important;
}
/* Style the arrow inside the select element: */
.select-selected:after {
position: absolute;
content: "";
width: 1.125rem;
height: 0.6875rem;
border-color: #fff;
background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="17.711" height="10.752" viewBox="0 0 17.711 10.752"><path id="Path_1462" data-name="Path 1462" d="M8.875,6.552c.377-.387.743-.771,1.117-1.145q2.543-2.539,5.09-5.073A.978.978,0,0,1,16.513.3c.332.31.649.637.955.972A.949.949,0,0,1,17.415,2.6l-3.093,3.1Q11.966,8.048,9.61,10.4a1.042,1.042,0,0,1-.878.341,1.007,1.007,0,0,1-.613-.319Q5.451,7.761,2.786,5.093C1.97,4.277,1.159,3.455.337,2.645A.986.986,0,0,1,.274,1.223C.588.895.9.564,1.242.263A.956.956,0,0,1,2.626.335Q3.9,1.608,5.177,2.883q1.8,1.794,3.609,3.586Z" transform="translate(0 0)" fill="%23009ade"/></svg>');
right:1rem;
}
/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
border-color: transparent transparent #fff transparent;
}
/* style the items (options), including the selected item: */
.select-items div,.select-selected {
color: #54565A;
font-size: 1rem;
padding: 0.5625rem 1rem;
border: 1px solid #707070;
border-top:0;
cursor: pointer;
display: flex;
align-items: center;
}
/* Style items (options): */
.select-items {
position: absolute;
background-color: white;
top: 100%;
left: 0;
right: 0;
z-index: 99;
}
/* Hide the items when the select box is closed: */
.select-hide {
display: none;
}
.select-items div:hover, .same-as-selected {
background-color: rgba(0, 0, 0, 0.1);
}