Применять пользовательскую проверку Bootstrap только к недопустимым полям
Я изучаю Bootstrap, и мне интересно, есть ли простой способ изменить стиль поля только в том случае, если оно недействительно?
<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>Это код, с которым я играю. Я могу получить поле ввода зеленого/красного цвета для действительного/недействительного. Я хочу, чтобы он был красным только тогда, когда он недействителен, и оставался серым (и не имел зеленой галочки), когда он действителен.
@Phil Нет, я хочу, чтобы он был красным только тогда, когда он недействителен. Я хочу, чтобы он выглядел так же, как без was-validated, когда он действителен. Имеет ли это больше смысла?
Ответы 1
Нацелившись на правильные классы в CSS, вы можете отменить изменения из начальной загрузки:
.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;
}
При этом останутся только красные/недействительные.
Демо:
.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>Когда он серый/действительный, справа от стрелок там, где была галочка, все еще остается пробел. Этот пробел невозможен без was-validated. Есть ли способ избавиться от этого?
Это именно то, что я хотел. Спасибо. Просто дополнительный вопрос: есть ли простой способ узнать, какие изменения в начальной загрузке я хочу отменить? Например, теперь я хочу сделать это и для некоторых флажков. Я понимаю, что надо поменять form-control на form-check-input, но как узнать остальное?
Вы можете использовать инструменты разработчика в своем браузере (F12 в Chrome). Нажмите на значок инспектора, затем выберите элемент, который вы хотите проверить на своей странице. Соответствующий CSS будет отображен. Оттуда вы можете включить/отключить свойства CSS и проверить, из какого файла получено это свойство CSS.
Не совсем понятно, о чем вы спрашиваете. Вы хотите, чтобы поле всегда было красным, независимо от того, какое в нем значение?