xxxxxxxxxx1
<div class="form-outline m-3">2
<input type="text" id="form12" class="form-control" />3
<label class="form-label" for="form12">Example label</label>4
</div>5
6
<div class="m-3">7
<select class="select">8
<option value="1">One</option>9
<option value="2">Two</option>10
<option value="3">Three</option>11
<option value="4">Four</option>12
<option value="5">Five</option>13
</select>14
<label class="form-label select-label">Example label</label>15
</div>16
xxxxxxxxxx1
.form-outline .form-control:focus~.form-notch .form-notch-leading,2
.select-input.focused~.form-notch .form-notch-leading {3
border-top: .125rem solid #00B74A;4
border-bottom: .125rem solid #00B74A;5
border-left: .125rem solid #00B74A;6
box-shadow: -1px 0 0 0 #00B74A, 0 1px 0 0 #00B74A, 0 -1px 0 0 #00B74A;7
}8
.form-outline .form-control:focus~.form-notch .form-notch-middle,9
.select-input.focused~.form-notch .form-notch-middle {10
border-bottom: .125rem solid #00B74A;11
box-shadow: 0 1px 0 0 #00B74A;12
border-top: 1px solid transparent;13
}14
15
.form-outline .form-control:focus~.form-notch .form-notch-trailing,16
.select-input.focused~.form-notch .form-notch-trailing {17
border-color: currentcolor currentcolor currentcolor #00B74A;18
border-bottom: .125rem solid #00B74A;19
border-right: .125rem solid #00B74A;20
border-top: .125rem solid #00B74A;21
box-shadow: 1px 0 0 0 #00B74A, 0 -1px 0 0 #00B74A, 0 1px 0 0 #00B74A;22
}23
24
.form-outline .form-control:focus~.form-label {25
color: #00B74A;26
} 27
28
.form-label {29
color: pink !important;30
}31
32
.select-input.focused~.select-arrow {33
color: #00B74A;34
}1
1
Console errors: 0