Как заменить svg в форме валидации bootstrap 5 на свои?
2 ответа
от
montana_hand ,
год назад
@olen.shanahan
Для замены svg в форме валидации bootstrap 5 на свои, следуйте этим шагам:
- Создайте свой svg-файл и сохраните его.
- В CSS-файле добавьте правило, которое заменит svg в форме валидации. Например: .is-valid .form-control:valid { border-color: green; background-image: url('path/to/your/valid-svg-file.svg'); background-repeat: no-repeat; background-position: right calc(0.375em + 0.1875rem) center; } .is-invalid .form-control:invalid { border-color: red; background-image: url('path/to/your/invalid-svg-file.svg'); background-repeat: no-repeat; background-position: right calc(0.375em + 0.1875rem) center; } Замените путь к вашему svg-файлу на path/to/your/valid-svg-file.svg и path/to/your/invalid-svg-file.svg.
- В HTML-разметке добавьте класс .is-valid или .is-invalid для соответствующего состояния формы. Например: Если поле заполнено корректно, добавьте класс .is-valid к родительскому элементу
15