xxxxxxxxxx1
<div class="container mt-5">2
<div class='is-valid'>3
<select4
class="select is-valid"5
id="basic-select"6
data-mdb-validation="true"7
data-mdb-valid-feedback="This value is valid"8
data-mdb-invalid-feedback="This value is invalid"9
data-mdb-clear-button="true"10
>11
<option value="1">One</option>12
<option value="2">Two</option>13
<option value="3">Three</option>14
<option value="4">Four</option>15
<option value="5">Five</option>16
<option value="6">Six</option>17
<option value="7">Seven</option>18
<option value="8">Eight</option>19
</select>20
</div>21
22
<div class="my-5"></div>23
24
<div class="is-invalid">25
<select26
class="select is-invalid"27
id="basic-select"28
data-mdb-validation="true"29
data-mdb-valid-feedback="This value is valid"30
data-mdb-invalid-feedback="This value is invalid"31
data-mdb-clear-button="true"32
>33
<option value="1">One</option>34
<option value="2">Two</option>35
<option value="3">Three</option>36
<option value="4">Four</option>37
<option value="5">Five</option>38
<option value="6">Six</option>39
<option value="7">Seven</option>40
<option value="8">Eight</option>41
</select>42
</div>43
</div>xxxxxxxxxx1
.is-valid .select-input {2
margin-bottom: 1rem;3
background-image: none;4
padding-right: calc(1.6em + 0.75rem);5
}6
7
.is-valid .valid-feedback {8
display: block;9
}10
11
.is-valid .form-outline .form-control~.form-notch .form-notch-leading,12
.is-valid .form-outline .form-control~.form-notch .form-notch-trailing,13
.is-valid .select-input {14
border-color: #00b74a;15
}16
17
.is-valid .form-outline .select-input.focused~.form-notch .form-notch-leading {18
box-shadow: -1px 0 0 0 #00b74a, 0 1px 0 0 #00b74a, 0 -1px 0 0 #00b74a;19
}20
21
.is-valid .form-outline .select-input.focused~.form-notch .form-notch-trailing {22
box-shadow: 1px 0 0 0 #00b74a, 0 -1px 0 0 #00b74a, 0 1px 0 0 #00b74a;23
}24
25
.is-valid .select-arrow {26
color: #00b74a;27
}28
29
.is-invalid .select-input {30
margin-bottom: 1rem;31
background-image: none;32
padding-right: calc(1.6em + 0.75rem);33
}34
35
.is-invalid .invalid-feedback {36
display: block;37
}38
39
.is-invalid .form-outline .form-control~.form-notch .form-notch-leading,40
.is-invalid .form-outline .form-control~.form-notch .form-notch-trailing,41
.is-invalid .select-input {42
border-color: #f93154;43
}44
45
.is-invalid .form-outline .select-input.focused~.form-notch .form-notch-leading {46
box-shadow: -1px 0 0 0 #f93154, 0 1px 0 0 #f93154, 0 -1px 0 0 #f93154;47
}48
49
.is-invalid .form-outline .select-input.focused~.form-notch .form-notch-trailing {50
box-shadow: 1px 0 0 0 #f93154, 0 -1px 0 0 #f93154, 0 1px 0 0 #f93154;51
}52
53
.is-invalid .select-arrow {54
color: #f93154;55
}56
57
1
1
Console errors: 0