Как задать цвет половине border?

Question

Столкнулся с формой , в которой при правильном заполнении формы (valid) нижний border должен покраситься на половину в зелёный. Как это сделать в css или js?

Answer 1

Самый правильный способ:

Задать какой-то класс в 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>

Answer 2

Вот что я придумал, надеюсь помог вам

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>

БЛОГ НА HUSL

Как задать цвет половине border?

Ответы (2 шт):