Как изменить цвет рамки на поле ввода HTML / флажок через JavaScript?

Question

Я сделал "зарегистрироваться - форма входа в HTML / CSS. Я использовал regexp для электронной почты и пароля. Теперь я хочу закрасить границу поля ввода и флажок красным, когда они неправильные. Я не знаю, как выбрать этот конкретный элемент и сделать его красным.

< Сильный > HTML

//I want this element's border color red

<input id="email-input" class="account-input"
 type="text" placeholder="Enter Email"
 name="email" required />


//Checkbox element i want red.

<input class="checkboxes" type="checkbox"
 id="capital" name="cap" value="cap" disabled />
<label for="capital">Capital</label>

< Сильный > JAVASCRIPT

if (counter === 6) {
      storeUserData();
      counter = 0;
      console.log(userArray);
    } else { // If email NOT valid do this
      e.preventDefault();
      document.getElementById("capital").style.border = "1px solid red";
      document.getElementById("characters").style.border = "1px solid red";
      counter = 0;
    }
  } else {
    e.preventDefault();
    result.innerHTML = "wrong format";
    //document.getElementById("email.input").style.border = "1px solid red;";
    return false;
  }

javascript html css

1

Tilda

Answer 1

input[type=checkbox] { display: none; }
input[type=checkbox] + label {
  padding-left: 25px;
  position: relative;
}

input[type=checkbox] + label::before {
  display: block;
  border: 1px solid #000000;
  left: 3px;
  top: 3px;
  height: 14px;
  width: 14px;
  content: "";
  position: absolute;
  line-height: 14px;
}

input[type=checkbox]:invalid + label { color: black; }

input[type=checkbox]:invalid + label::before {
  border-color: black;
}

input[type=checkbox]:checked + label::before {
  content: "✓";
}

<input class="checkboxes" type="checkbox"
 id="capital" name="cap" value="cap" required />
<label for="capital">Your text</label> <br>

Answer 2

Как уже упоминалось Connexo, флажки сложно оформить, и вы можете заменить их полностью. Вы также можете использовать outline , если вы действительно хотите оставить фактический флажок, но стиль его красный.

Лично я бы использовал CSS-класс и методы classList.add или classList.toggle , а не стилизовал элементы напрямую.

const input = document.getElementById('email-input')
input.classList.add('error')

const checkbox = document.getElementById('capital')
checkbox.classList.add('checkboxError')

.error {
  border: 1px solid red;
}
  
.checkboxError {
  outline: 1px solid red;
}

<!-- I want this element's border color red -->

<input id="email-input" class="account-input"
 type="text" placeholder="Enter Email"
 name="email" required />


<!-- Checkbox element i want red. -->

<input class="checkboxes" type="checkbox"
 id="capital" name="cap" value="cap" disabled />
<label for="capital">Capital</label>

Answer 3

Некоторые элементы, такие как select и input type = "checkbox" , трудно, если не невозможно, стилизовать в отношении многих из их свойств стиля.

Я бы посоветовал вам использовать общий метод замены флажков:

input[type=checkbox] { display: none; }
input[type=checkbox] + label {
  padding-left: 30px;
  position: relative;
}

input[type=checkbox] + label::before {
  display: block;
  border: 1px solid #999;
  left: 3px;
  top: 3px;
  height: 14px;
  width: 14px;
  content: "";
  position: absolute;
  line-height: 14px;
}

input[type=checkbox]:invalid + label { color: red; }

input[type=checkbox]:invalid + label::before {
  border-color: red;
}

input[type=checkbox]:checked + label::before {
  content: "✓";
}

<input class="checkboxes" type="checkbox"
 id="capital" name="cap" value="cap" required />
<label for="capital">Capital</label>

В этом примере я использую атрибут required , чтобы установить флажок : invalid . Не стесняйтесь подстраиваться под ваши нужды, например, с помощью класса CSS вместо : invalid .

Как изменить цвет рамки на поле ввода HTML / флажок через JavaScript?

3 ответа

Новые вопросы

javascript