Custom Styling HTML5 Validation Messages

HTML & CSS
1

Hi there guys,

I am working on a template website and I wanted to be able to add custom custom styling on the HTML5 validation forms. The HTML code is below:


<form id="contact-form">
	<label for="name" class="inline-label">Name</label>
	<input type="name" class="input single-row" placeholder="required" required/>
	<br class="clear" />
	<label for="email" class="inline-label">Email</label>						
	<input type="email" class="input single-row" placeholder="required" required/>					
	<br class="clear" />
	<label for="website" class="inline-label">Website</label>						
	<input type="website" class="input single-row" placeholder="required" required/>							
	<br class="clear" />
	<label for="comments" class="inline-label">Comments</label>						
	<textarea name="text" class="input textarea" placeholder="put your comment here" required></textarea>						
	<br />
	<button type="submit" class="button first-button">Submit</button>
	<button type="reset" class="button">Reset</button>
</form>

Because the form is required, as now stated with HTML5, a rather ugly pop-up appears. I want to be able to style this ugliness to something less ugly lol. I found this website, http://stackoverflow.com/questions/5713405/how-do-you-style-the-html5-form-validation-messages. But I am not sure if am able to enhance the appearance on all the browsers.

I am thinking of completely removing the required field, or using jQuery instead.

2

Personally i feel that HTML5 validation has an EXTREMELY long way to go before it is 100% as currently i still see it as been something that’s experimental, i would recommend you use the jQuery validation plugin which i have used in the past and loved because of it’s extended base allowing for much more than whats offered straight up.

3

And i would recommend PHP validation, as you can’t rely on JS either. HTML and JS can offer nice enhancements, but they can’t replace server-side checks.