Столкнулся с формой , в которой при правильном заполнении формы (valid) нижний border должен покраситься на половину в зелёный. Как это сделать в css или js?
-
А что уже имеется? А какие знания по js уже есть у вас? На какой уровень рассчитывать?– Алексей Шиманский15 фев 2022 в 12:31
-
border-image в помощь. либо имитировать эффект border– Andrei Fedorov15 фев 2022 в 12:32
-
1А что сразу минус бал ставить, интересный же вопрос– Miha15 фев 2022 в 13:25
-
Вопрос, на мой взгляд имеет право на существование. Поэтому его, хорошо бы переоткрыть. Вопрос поставили на закрытие, как я предполагаю из-за слова "border" Особо не вчитываясь в условия, что показывают ответы. А вопрос на самом деле интересный.– Alexandr_TT15 фев 2022 в 14:16
-
@Alexandr_TT, просто это составной вопрос, в котором даже я, ничего не смыслящий во всех этих css-ах/javascript-ах, ясно вижу как минимум три подвопроса. ну, и, как обычно, напомню вам лично: чтобы вопрос остался, он вовсе необязательно должен быть открыт.– aleksandr barakin15 фев 2022 в 14:31
|
Показать ещё 11 комментариев
2 ответа
Самый правильный способ:
- Задать какой-то класс в CSS
- При валидации через JS либо добавлять этот самый класс, либо удалять
Пример CSS может быть такой:
div.test {
width: 100px;
height: 100px;
background: white;
}
div.test::before {
position: absolute;
content: '';
width: 104px;
height: 107px;
top: 4px;
background: linear-gradient(to left, #dd0a0a, #2e76a9);
z-index: -1;
left: 4px;
}
<div class=test>test</div>
-
утонченная изощренность, сначала ответить на вопрос, а потом отдать голос на закрытие. Ну если это ради медальки - "Ревизор", то теперь есть возможность отдать голос на переоткрытие 15 фев 2022 в 13:50
-
1@Alexandr_TT всё было наоборот, вначале голос за закрытие, потом ответ) Просто вспомнил, что бордер сам недавно делал такой (если я правильно понял какой нужно). С закрытием на самом деле забыл, что я голосовал, ну бывает. Думаю его всё равно закрыли бы. 15 фев 2022 в 13:52
-
нижний border должен покраситься на половину в зелёный. если я правильно понял, то закрасить нижнюю половину, а не удалить половину 15 фев 2022 в 13:57
Вот что я придумал, надеюсь помог вам
const form = document.getElementById("form-test");
const inputForm = form.getElementsByTagName("input");
for (let i = 0; i < inputForm.length; i++) {
inputForm[i].addEventListener("keyup", function() {
let num = 0;
for (let j = 0; j < inputForm.length; j++) {
if (inputForm[j].value.length != 0) num++;
}
if (num >= (inputForm.length / 2)) form.classList.add("border");
else form.classList.remove("border");
if(num == inputForm.length) form.classList.add("border-full");
else form.classList.remove("border-full");
});
}
.form {
width: 80%;
height: 250px;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, .4);
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
position: relative;
}
.form div {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 50%;
}
.form div label {
width: 100%;
text-align: center;
}
.form:after {
position: absolute;
content: "";
width: 0;
height: 4px;
background-color: green;
bottom: 0;
left: 0;
transition: .5s;
}
.border:after{
width: 50%;
}
.border-full:after{
width: 100%;
}
<form class="form" id="form-test">
<div>
<label for="firstname">Имя</label>
<input type="text" id="firstname">
</div>
<div>
<label for="lastname">Фамилия</label>
<input type="text" id="lastname">
</div>
<div>
<label for="email">Почта</label>
<input type="email" id="email">
</div>
<div>
<label for="age">Возраст</label>
<input type="number" id="age">
</div>
<div>
<label for="password">Пароль</label>
<input type="text" id="password">
</div>
<div>
<label for="confirm-password">Повторите пароль</label>
<input type="text" id="confirm-password">
</div>
<input type="submit" value="Отправить">
</form>
-
можешь проголосовать за переоткрытие. Свой ответ подправь немного,- нижний border должен покраситься на половину в зелёный 15 фев 2022 в 13:46
-
-