CODEWITHSUNDEEP
javascripthtmlcss
Rohit Kumar
Rohit Kumar

Reputation: 2031

How to remove default styling of html 5 form elements?

How can I reset or change the default styling of the email input element?

input
{
  width: 100%;
}
<input type="text" placeholder="text box" /><br /><br />
<input type="email" placeholder="email box with default styling when invalid email is entered" />

I want the validation of email element to remain as it is. Just want to change the red border when wrong email is entered.

Upvotes: 0

Views: 4209

Answers (4)

Vlad Pintea
Vlad Pintea

Reputation: 853

Seems you want to handle html5's built in behavior for validation. This seems to be what you are looking for, pseudoclasses like :invalid. More info here: http://html5doctor.com/css3-pseudo-classes-and-html5-forms/

The solution will not be all that cross-browser. I recommend using js for client side validation, something like jquery validate: http://jqueryvalidation.org/

Upvotes: 0

Vaibs_Cool
Vaibs_Cool

Reputation: 6156

I think you have to check in the validation 

var email = document.querySelector('input[type="email"]');
email.oninvalid = function(e) {
e.target.setCustomValidity("");
if (!e.target.validity.valid) { 
    email.style.borderColor="red";
    e.target.setCustomValidity("Please enter a valid eMail address"); }
};

Fiddle

Upvotes: 1

SW4
SW4

Reputation: 71210

Its not particularly clear what you are after, however note that you can style the invalid state of HTML5 (you must be using a compatible browser) input fields using the :invalid pseudo.

input:invalid {
  border: 1px solid red;
}
:focus {
  outline: none;
}
<input type="number" placeholder="enter some letters.." />

If however you are referring to removing default input styling, you will either have to override the useragent stylesheet defaults, or depending on the styles in question use (a derivation of) appearance:none

The appearance property defines how elements (particularly form controls) appear by default.

Upvotes: 3

Aitor
Aitor

Reputation: 465

You can add a "class" to email input when it's wrong, for example:

input[type="email"].error {
    border-color: red;
}

Is that what you was looking for?

Upvotes: -1

Related Questions