How to change bordercolor on HTML input-field/checkbox through javascript?

Question

I've made a "sign up - login-form in HTML/CSS. I have used regexp for email and password. Now I want to color the border of the input-field and checkbox red when they are wrong. I dont know how to select that specific element and make it red.

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;
  }

What doesn't work? At first glance it seems like this should work unless you conditions(if statements) are wrong. — NTR
– NTR, Commented Oct 26, 2019 at 14:25

connexo · Accepted Answer · 2019-10-26 14:30:12Z

Some elements like select and input type="checkbox" are hard, if not impossible, to style with regard to many of their styling properties.

I'd suggest you use the common checkbox replacement technique:

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>

In the example I'm using the required attribute to make an unchecked checkbox :invalid. Feel free to adjust to your needs, for example with a CSS class instead of :invalid.

displacedtexan · Accepted Answer · 2019-10-26 14:39:09Z

As connexo mentioned, checkboxes are hard to style and you can replace them entirely. You can also use outline if you really want to keep the actual checkbox but style it red.

Personally, I would use a CSS class and the classList.add or classList.toggle methods rather than styling the elements directly.

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>

Collectives™ on Stack Overflow

How to change bordercolor on HTML input-field/checkbox through javascript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related