xxxxxxxxxx1
<div class="form-outline my-5">2
<input type="text" id="form1" class="form-control" />3
<label class="form-label" for="form1">Example label</label>4
</div>5
xxxxxxxxxx1
.form-outline .form-control:focus~.form-notch .form-notch-leading {2
border-top: .125rem solid #DC4C64;3
border-bottom: .125rem solid #DC4C64;4
border-left: .125rem solid #DC4C64;5
box-shadow:-1px 0px 0px 0px #DC4C64, 0px 1px 0px 0px #DC4C64, 0px -1px 0px 0px #DC4C64;6
}7
.form-outline .form-control:focus~.form-notch .form-notch-middle {8
border-bottom: .125rem solid;9
border-color: #DC4C64;10
border-top:none;11
box-shadow: 0 1px 0 0 #DC4C64;12
}13
14
.form-outline .form-control:focus~.form-notch .form-notch-trailing {15
border-color: currentcolor currentcolor currentcolor #E4A11B;16
border-bottom: .125rem solid #DC4C64;17
border-right: .125rem solid #DC4C64;18
border-top: .125rem solid #DC4C64;19
box-shadow: 1px 0 0 0 #DC4C64, 0 -1px 0 0 #DC4C64, 0 1px 0 0 #DC4C64;20
}21
22
.form-outline .form-control:focus~.form-label {23
color: #DC4C64;24
} 25
26
.form-outline .form-control.active~.form-notch .form-notch-middle, .form-outline .form-control:focus~.form-notch .form-notch-middle {27
border-top: 1px transparent;28
}1
1
Console errors: 0