Can We validate Form Fields with CSS3?

[Safeer008]

Is there any way that we can validate our form fields with CSS3. I know that with HTML5 we can.

[Ingolme]

Neither HTML 5 nor CSS 3 can do that. Javascript necessary to validate form fields. HTML is for describing data and CSS only deals with presentation. You use Javascript to manage behavior.

[tejasamrute]

well this is debateable.....we can tell the visitor whether they are filling form correctly or not through css you dont need javascript....

 

CSS.....

 

<style type="text/css"> input:valid {background-color:#a8e48e;} input:invalid {background-color:#fb9d9d;} input[type=text], input[type=email], input[type=number] {box-shadow:none;width:500px;height:25px;border:none;padding-left:10px;} input[type=submit] {background-color:white;width:100px;height:30px;box-shadow:none;border:1px solid green;cursor:pointer;}</style>

 

 

HTML

 

<form action="" method="get"> <input name="" type="text" required><br><br> <input name="" type="email" required><br><br> <input name="" type="number" required ><br><br> <input name="" type="submit" value="Submit"></form>

 

P.S - Check the :valid and :invalid browser compatibility.