xxxxxxxxxx
1
<div class="p-5">
2
<select class="select" data-mdb-filter="true">
3
<option value="1">One</option>
4
<option value="2">Two</option>
5
<option value="3">Three</option>
6
<option value="4">Four</option>
7
<option value="5">Five</option>
8
<option value="6">Six</option>
9
<option value="7">Seven</option>
10
<option value="8">Eight</option>
11
<option value="9">Nine</option>
12
<option value="10">Ten</option>
13
</select>
14
<label class="form-label select-label">Example label</label>
15
</div>
16
17
18
<div class="bg-dark p-5">
19
<select class="select" data-mdb-form-white="true">
20
<option value="1">One</option>
21
<option value="2">Two</option>
22
<option value="3">Three</option>
23
<option value="4">Four</option>
24
<option value="5">Five</option>
25
<option value="6">Six</option>
26
<option value="7">Seven</option>
27
<option value="8">Eight</option>
28
</select>
29
<label class="form-label select-label">Example label</label>
30
</div>
xxxxxxxxxx
1
.select-input.focused {
2
color: var(--mdb-form-outline-select-input-focused-color)
3
}
4
.select-input.focused ~ .select-label {
5
color: var(--mdb-form-outline-select-label-color)
6
}
7
8
.select-input.focused ~ .form-notch .form-notch-leading {
9
border-color: var(--mdb-form-outline-select-notch-border-color);
10
box-shadow: -1px 0 0 0 var(--mdb-form-outline-select-notch-border-color),
11
0 1px 0 0 var(--mdb-form-outline-select-notch-border-color),
12
0 -1px 0 0 var(--mdb-form-outline-select-notch-border-color);
13
}
14
15
.select-input.focused ~ .form-notch .form-notch-trailing {
16
border-color: var(--mdb-form-outline-select-notch-border-color);
17
box-shadow: 1px 0 0 0 var(--mdb-form-outline-select-notch-border-color),
18
0 -1px 0 0 var(--mdb-form-outline-select-notch-border-color),
19
0 1px 0 0 var(--mdb-form-outline-select-notch-border-color);
20
}
1
1
Console errors: 0