_custom_select.scss
3.1 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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
.select {
&:after {
content:'';
display: block;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16.175' height='9.808' viewBox='0 0 16.175 9.808'%3E%3Cpath id='Path_1396' data-name='Path 1396' d='M19.409 190.005c.561-.568 1.11-1.13 1.667-1.686q2-2 4.01-4a.9.9 0 0 1 1.329 0c.254.261.515.516.772.774a.881.881 0 0 1-.005 1.318q-1.8 1.8-3.605 3.606-1.748 1.75-3.495 3.5a.975.975 0 0 1-.654.312.931.931 0 0 1-.719-.31q-1.349-1.354-2.7-2.706-1.836-1.838-3.674-3.675c-.25-.25-.5-.5-.75-.75A.876.876 0 0 1 11.6 185.1l.766-.766a.9.9 0 0 1 1.348 0l3.252 3.24 2.355 2.345C19.339 189.941 19.363 189.962 19.409 190.005Z' transform='translate(-11.305 -184.028)'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
width: 1rem;
height: 0.5rem;
position: absolute;
right: 0;
}
&:hover {
&:after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16.175' height='9.808' viewBox='0 0 16.175 9.808'%3E%3Cpath id='Path_1396' data-name='Path 1396' d='M19.409 190.005c.561-.568 1.11-1.13 1.667-1.686q2-2 4.01-4a.9.9 0 0 1 1.329 0c.254.261.515.516.772.774a.881.881 0 0 1-.005 1.318q-1.8 1.8-3.605 3.606-1.748 1.75-3.495 3.5a.975.975 0 0 1-.654.312.931.931 0 0 1-.719-.31q-1.349-1.354-2.7-2.706-1.836-1.838-3.674-3.675c-.25-.25-.5-.5-.75-.75A.876.876 0 0 1 11.6 185.1l.766-.766a.9.9 0 0 1 1.348 0l3.252 3.24 2.355 2.345C19.339 189.941 19.363 189.962 19.409 190.005Z' transform='translate(-11.305 -184.028)' fill='%23699'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
}
}
}
// Learn about this solution to creating custom select styles:
// @link https://moderncss.dev/custom-select-styles-with-pure-css/
select {
// A reset of styles, including removing the default dropdown arrow
appearance: none;
background-color: transparent;
border: none;
margin: 0;
width: 100%;
font-family: inherit;
font-size: inherit;
cursor: inherit;
line-height: inherit;
color:#4D4D4D;
font-family: "PT Sans",sans-serif;
font-size: 1rem;
// Stack above custom arrow
z-index: 1;
// Remove dropdown arrow in IE10 & IE11
// @link https://www.filamentgroup.com/lab/select-css.html
&::-ms-expand {
display: none;
}
// Remove focus outline, will add on alternate element
outline: none;
}
.select {
display: grid;
grid-template-areas: "select";
align-items: center;
position: relative;
select,
&::after {
grid-area: select;
}
select {
border: 0 !important;
}
min-width: 15ch;
max-width: 30ch;
padding: 0.506rem;
font-size: 1rem;
cursor: pointer;
line-height: 1.1;
// Optional styles
// remove for transparency
background-color: #fff;
border:1px solid #BEBEBE;
}
// Interim solution until :focus-within has better support
select:focus + .focus {
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
border: 2px solid var(--select-focus);
border-radius: inherit;
}
select[multiple] {
padding-right: 0;
}