Input type email - remove default style

Question

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?

Does this answer your question? [Validation in HTML5. :invalid classe after submit](https://stackoverflow.com/questions/7576190/validation-in-html5-invalid-classe-after-submit) — Awais, Mar 27 '20 at 11:45
@LuísP.A. It doesn't work. It remove my custom border, but that red thing is still there. — KunLun, Mar 27 '20 at 12:35

Ritanshu Singh · Accepted Answer · 2020-03-27T12:50:42.667

2

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.

edited Mar 27 '20 at 12:50

answered Mar 27 '20 at 11:40

Ritanshu Singh

159
8

As you can see(in snippet) that red thing is still there if I type an invalid email. – KunLun Mar 27 '20 at 12:38
I can't see any red border in the snippet. Probably you might have some different browser than chrome or it might be outdated. You have something different on your device. What browser are you using? – Ritanshu Singh Mar 27 '20 at 12:42
I'm using Firefox 74.0. Here is an image with what I see: https://i.imgur.com/iZ2Uhkx.png – KunLun Mar 27 '20 at 12:46
1

Okay, I got it, Firefox kind of seems to apply a box-shadow of red color on an invalid style, its not a border, its a shadow, just add box-shadow: none; on :invalid state. – Ritanshu Singh Mar 27 '20 at 12:50
I've edited the code above, just run directly here, the snippet – Ritanshu Singh Mar 27 '20 at 12:51
Thank you! There is no way to disable this default css from browser? I ask this because maybe other browser have other default css for `invalid`. – KunLun Mar 27 '20 at 12:54
Browsers have this default styling built in their actual binary and usually, they don't provide you with options to edit such defaults. However, you can use an extension (I am not aware of any) that can help you with this. Extensions have this capability that they can interact with the page code. – Ritanshu Singh Mar 27 '20 at 12:58

Input type email - remove default style

1 Answers1