xxxxxxxxxx
1
<select class="select" multiple>
2
<option value="1">One</option>
3
<option value="2">Two</option>
4
5
</select>
6
<label class="form-label select-label">Example label</label>
7
8
xxxxxxxxxx
1
2
/* unfocused borders and label*/
3
4
.form-outline .form-control~.form-notch .form-notch-trailing {
5
border-top: .125rem solid #ffaabb;
6
border-right: .125rem solid #ffaabb;
7
border-bottom: .125rem solid #ffaabb;
8
}
9
10
.form-outline .form-control~.form-notch .form-notch-middle {
11
border-bottom: .125rem solid #ffaabb;
12
border-top: .125rem solid #ffaabb;
13
}
14
.form-outline .form-control~.form-notch .form-notch-leading {
15
border-top: .125rem solid #ffaabb;
16
border-bottom: .125rem solid #ffaabb;
17
border-left: .125rem solid #ffaabb;
18
}
19
20
.form-outline .form-control~.form-label {
21
color: #ffaabb;
22
}
23
.select-input~.select-arrow {
24
color: #ffaabb;
25
}
26
27
28
/* focused borders, arrow and label*/
29
.form-outline .form-control:focus~.form-notch .form-notch-leading {
30
border-top: .125rem solid #cceedd;
31
border-bottom: .125rem solid #cceedd;
32
border-left: .125rem solid #cceedd;
33
}
34
35
.form-outline .form-control:focus~.form-notch .form-notch-trailing {
36
border-top: .125rem solid #cceedd;
37
border-right: .125rem solid #cceedd;
38
border-bottom: .125rem solid #cceedd;
39
}
40
41
.form-outline .form-control:focus~.form-notch .form-notch-middle {
42
border-top: 0;
43
border-bottom: .125rem solid #cceedd;
44
}
45
46
.form-outline .form-control:focus~.form-label {
47
color: #cceedd;
48
}
49
.select-input.focused~.select-arrow {
50
color: #cceedd;
51
}
52
53
54
55
1
1
Console errors: 0