Click here to Skip to main content
13,053,276 members (58,944 online)
Click here to Skip to main content
Add your own
alternative version


9 bookmarked
Posted 7 Oct 2014

CSS: Custom HTML5 Form Validation with Visual Effects using Pseudo Class

, 7 Oct 2014
Rate this:
Please Sign up or sign in to vote.
CSS: Custom HTML5 Form Validation with Visual Effects using Pseudo Class


As we know, Pseudo Code is an informal descriptive language which helps human beings to understand the code, rather than just only machine readable. CSS pseudo-classes are used to make the UI more interactive and user-friendly, that means to add special effects to some CSS selectors.

The syntax of pseudo-classes is as follows:

selector:pseudo-class {

Let’s check an example how :valid and :invalid pseudo-classes work.

<!DOCTYPE html>
<html lang="en">
        <meta charset="utf-8">
        <style type="text/css">
	    input:required:invalid, input:focus:invalid { 
		background: url( no-repeat right top;
	    input:required:valid { 
		background: url( no-repeat right top; 
	<form action="" method="post">
	    <label for="email">Email: </label>
	    <input type="email" required>
	    <button type="submit">Go </button>

The above code will output as:


OMG!! 8-O without adding a single line of JavaScript code, how are we able to show customize error icon :-|.

WOW!! Great :) … That’s really cool 8-). We added CSS for focus invalid input, that’s why it is showing the invalid input icon.

Check the below output on valid URL input:


There are a lot more Pseudo Class available through which we can really add special effects without using JavaScript. Below listed Pseudo Classes are some of the examples among those:

  1. :first-child
  2. :focus
  3. :hover
  4. :right
  5. :target
  6. :valid
  7. :visited
  8. :active
  9. :checked
  10. :default
  11. :dir()
  12. :disabled
  13. :empty
  1. :enabled
  2. :first
  3. :root
  4. :scope
  5. :last-child
  6. :last-of-type
  7. :left
  8. :link
  9. :not()
  10. :nth-child()
  11. :only-child
  12. :first-of-type
  13. :fullscreen
  1. :only-of-type
  2. :optional
  3. :out-of-range
  4. :read-only
  5. :read-write
  6. :required
  7. :indeterminate
  8. :in-range
  9. :invalid
  10. :lang()
  11. :nth-last-child()
  12. :nth-last-of-type()
  13. :nth-of-type()

Note: Please check here for browser support details.

Thanks :) and I will be happy to head from you.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Software Developer (Senior)
India India
Software engineer with around 6 years of web application development experience in open source technologies like PHP, MySQL, HTML, HTML5, CSS, CSS3, Javascript, jQuery etc.

I love to learn and share my knowledge in which manner I can and like to solve the issues as in the coding perspective. I am an active contributor in community forums like StackOverflow, CodeProject etc. Besides that, I write blogs in free time and speak in various technical community events.

You may also be interested in...


Comments and Discussions

GeneralMy vote of 5 Pin
Humayun Kabir Mamun8-Oct-14 17:04
memberHumayun Kabir Mamun8-Oct-14 17:04 
GeneralRe: My vote of 5 Pin
Prava@MFS8-Oct-14 18:51
memberPrava@MFS8-Oct-14 18:51 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170713.1 | Last Updated 7 Oct 2014
Article Copyright 2014 by Prava-MFS
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid