CODEWITHSUNDEEP
htmlcss
Willy Wybert
Willy Wybert

Reputation: 43

Overwrite black border on input[type=text] CSS

I have a contact form. This form uses css .error to mark the invalid fields. I have the following code setup to style the input type text:

input[type=text] {
  border:1px solid #000;
}

but when a user doesn't fill out the form correctly, it will add .error to the form:

.error {
  border:1px solid red;
}

The problem: .error doesn't overwrite the input[type=text]. The borders will stay black but in the source code, the .error does get added but gets ignored.

How can I fix this problem?

Upvotes: 0

Views: 2481

Answers (1)

José Tomás Tocino
José Tomás Tocino

Reputation: 10069

You can increase the specificity of the selector by using:

input[type=text].error {
  border:1px solid red;
}

Upvotes: 6

Related Questions