Forms in CSS3

In this tutorial styling on a form will be discussed. Styling will be applied on the all field of a simple form. For example
1) input[type=text]
2) input[type=password]
3) input[type=number]
Some styling properties like padding , margin , max-width , background-color , border and outline will be applied on a form to make more attractive and very easy to use.

Example of form with styling

<style type="text/css">

  background-color: white;
  padding: 20px 20px 20px 30px;
  margin: 25px 10px 25px 10px;
  font-size: 18px;
  box-shadow: none;
  border: 1px solid grey;
  outline: 3px solid lightgreen;
  color: black;
.hp33-r2-in input{
  margin: 10px;
  border-radius: 5px;
  border-color: lightgreen;
.hp33-r2-in label{
  margin:  10px;
  border-radius:  5px;
  border-color:  lightgreen;
  font-size:  20px;
  font-weight:  300px;
.hp33-r2-in input:hover{
  background-color:  lightgrey;
  border-color:  green;
  cursor:  pointer;
  background-color:  lightgreen;

<!DOCTYPE html> <html> <head> <title>Get in tuch Signup</title> <meta charset="utf-8"> </head> <body> <h1>Get in tuch Signup</h1> <form class="hp33-r2-in" action="#" method="post"> <legend>Join our email list</legend> <p>Get news about</p> <ol> <li> <label for="firstlast"> Name:</label> <input type="text" name="username" > </li> <li> <label for="email"> Email:</label> <input type="text" name="email"> </li> </ol> <input class="s-form" type="submit" value="Submit"> </form> </body> </html>

Output of above code

Get in tuch Signup

Join our email list

Get news about

The Best

Comment here

If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.