how to custom "form-control:valid" style in bootstrap

Question

hi bootstrap have one style called "form-control:valid" i want to tick mark in input box when i want for example a pattern is mateched no only required filed. how to?

.form-control-custom.is-valid, .was-validated .form-control-custom:valid {

border-color: var(--bs-success);
padding-right: calc(1.5em + 0.75rem);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");

background-repeat: no-repeat;
background-position: right calc(0.375em + 0.1875rem) center;
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

Answer 1

You can customize the "form-control:valid" style in Bootstrap by creating a new CSS class, such as "form-control-custom", and applying it to your input element. You can then use the "is-valid" class or ":valid" pseudo-class to target the input element when it is in a valid state. You can change the border-color and background-image properties to add a tick mark to the input box. The above provided code snippet is an example of how you can do it.

Answer 2

https://code.sololearn.com/WbI861CJQctF/?ref=app

Answer 3

my code is:
https://www.sololearn.com/compiler-playground/W9IK2TVx0Srn

"form-control:valid" is bootstrap class