I am learning about Bootstrap, and I was wondering if there is a simple way of changing the style of a field only when it is invalid?
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="container">
<form class="needs-validation was-validated" novalidate>
<label for="sample" class="form-label">Number</label>
<input type="number" class="form-control" id="sample" min="1" step="1" required />
</form>
</div>
This is the code I am playing around with. I can get the input field green/red for valid/invalid. I only want it to be red when it is invalid, and remain gray (and not have the green check mark) when it is valid.
By targeting the correct classes in CSS you can revert the changes from bootstrap :
.container .form-control.is-valid, .container .was-validated .form-control:valid {
border-color: initial;
background-image: none;
padding-inline-end: 12px;
}
.container .form-control.is-valid:focus, .container .was-validated .form-control:valid:focus {
border-color: initial;
box-shadow: initial;
}
With this, only the red/invalid will remain.
Demo:
.container .form-control.is-valid, .container .was-validated .form-control:valid {
border-color: initial;
background-image: none;
padding-inline-end: 12px;
}
.container .form-control.is-valid:focus, .container .was-validated .form-control:valid:focus {
border-color: initial;
box-shadow: initial;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="container">
<form class="needs-validation was-validated" novalidate>
<label for="sample" class="form-label">Number</label>
<input type="number" class="form-control" id="sample" min="1" step="1" required />
</form>
</div>