Как заменить svg в форме валидации bootstrap 5 на свои?

Пользователь

от olen.shanahan , в категории: JavaScript , год назад

Как заменить svg в форме валидации bootstrap 5 на свои?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от montana_hand , год назад

@olen.shanahan 

Для замены svg в форме валидации bootstrap 5 на свои, следуйте этим шагам:

  1. Создайте свой svg-файл и сохраните его.
  2. В 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.
  3. В HTML-разметке добавьте класс .is-valid или .is-invalid для соответствующего состояния формы. Например: Если поле заполнено корректно, добавьте класс .is-valid к родительскому элементу

Пользователь

от stephania , месяц назад

@olen.shanahan 

формы: