CODEWITHSUNDEEP
htmlcss
KunLun
KunLun

Reputation: 3227

Input type email - remove default style

I have an <input type="emai"> on my html page.

When the email is not valid, the input get :invalid CSS pseudo-classes and the border became red.

Because I use a custom style input that thing makes it ugly.

How I can disable that red border and all default effect(if there are others) from :invalid?

Upvotes: 0

Views: 1427

Answers (1)

Ritanshu Singh
Ritanshu Singh

Reputation: 159

You can have multiple pseudo classes on an input but the most important three are :active , :focus and in this case :invalid . Active is when you have clicked on the input but doesn't leave your mouse. Focus is when your curser is blinking inside the input and invalid you know.

Here's the code that you can use. Also the border you are talking about can be the outline property and is in the focus state.

Here's the code that you can modify accordingly.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.input {
  height: 30px;
  width: 200px;
  color: black;
  font-family: Helvetica, Montserrat, Verdana, sans-serif;
  font-size: 20px;
}

input:active {
  background: rgba(4, 4, 4, 0.1);
  box-shadow: none;
}

.input:focus {
  outline: none;
  background: rgba(4, 4, 4, 0.1);
}

.input:invalid {
  border-color: black;
  box-shadow: none;
}
<input class="input" type="email" />

EDIT:

Firefox somehow seems to apply a box-shadow of red color on :invalid style. Just add box-shadow:none; in :invalid style and you will have no that border kindy thing.

Upvotes: 2

Related Questions