2

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

16
  • А что уже имеется? А какие знания по js уже есть у вас? На какой уровень рассчитывать? 15 фев 2022 в 12:31
  • border-image в помощь. либо имитировать эффект border 15 фев 2022 в 12:32
  • 1
    А что сразу минус бал ставить, интересный же вопрос
    – Miha
    15 фев 2022 в 13:25
  • Вопрос, на мой взгляд имеет право на существование. Поэтому его, хорошо бы переоткрыть. Вопрос поставили на закрытие, как я предполагаю из-за слова "border" Особо не вчитываясь в условия, что показывают ответы. А вопрос на самом деле интересный. 15 фев 2022 в 14:16
  • @Alexandr_TT, просто это составной вопрос, в котором даже я, ничего не смыслящий во всех этих css-ах/javascript-ах, ясно вижу как минимум три подвопроса. ну, и, как обычно, напомню вам лично: чтобы вопрос остался, он вовсе необязательно должен быть открыт. 15 фев 2022 в 14:31

2 ответа 2

2

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

  1. Задать какой-то класс в CSS
  2. При валидации через 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>

3
  • утонченная изощренность, сначала ответить на вопрос, а потом отдать голос на закрытие. Ну если это ради медальки - "Ревизор", то теперь есть возможность отдать голос на переоткрытие 15 фев 2022 в 13:50
  • 1
    @Alexandr_TT всё было наоборот, вначале голос за закрытие, потом ответ) Просто вспомнил, что бордер сам недавно делал такой (если я правильно понял какой нужно). С закрытием на самом деле забыл, что я голосовал, ну бывает. Думаю его всё равно закрыли бы. 15 фев 2022 в 13:52
  • нижний border должен покраситься на половину в зелёный. если я правильно понял, то закрасить нижнюю половину, а не удалить половину 15 фев 2022 в 13:57
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>

3
  • можешь проголосовать за переоткрытие. Свой ответ подправь немного,- нижний border должен покраситься на половину в зелёный 15 фев 2022 в 13:46
  • @Alexandr_TT знал бы я как)
    – Miha
    15 фев 2022 в 13:52
  • @Alexandr_TT да не вижу T-T, но надеюсь переоткроют
    – Miha
    15 фев 2022 в 14:01

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.