how to change border color of required input fields?

Question

I'm trying to change browser's default border style for required field which uses box-shadow in firefox and outline in chrome.

So, I'm doing like this:

*{
    box-shadow: none;
    outline: none;
}
input{
    border: 2px solid black;
}
input:invalid{
    border: 2px solid red;
}

But this shows red border already on load of the window. But I wanted it to be red only when it's invalid.

demo

How can I solve the problem?

Answer 1

Since we only want to denote it invalid once it has focus. you could try code like:-

input:focus:required:invalid {border: 2px solid red;}
input:required:valid { border: 2px solid black; }

DEMO HERE

Answer 2

Should remove required to make your input it is valid or else for required field you can do the following

input:invalid {
  background: hsla(0, 90%, 70%, 1);
}
input:valid {
  background: hsla(100, 90%, 70%, 1);
}
input:focus {
  background: hsla(100, 90%, 70%, 1);
}
input:required {
  border-color: #800000;
  border-width: 3px;
}

UPDATED DEMO

RESOURCE

Answer 3

Without color:

input:required {
    border-color: #ccc !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}