Style HTML Form or CSS Form Design Examples

Ad Banner Image

CSS Forms Design

CSS form design is used to change the look and feel of the HTML Form by the use of some CSS Properties.

Example 1 – Basic HTML form with input text box, and submit button

<!DOCTYPE html>
<html>
  <head>
	<style>

	</style>
  </head>
  
  <body>
	<div>
	  <form>
		<label for="fname">First Name</label>
		<input type="text" id="fname" name="firstname" placeholder="Your name..">
		<input type="submit" value="Submit">
	  </form>
	</div>
  </body>
</html>

In the above code, we used two input fields one is an input text box and another is a submit button.

Style CSS Form Design Examples
Fig.1 – HTML Forms output without styling

The above screenshot shows how the default form looks.

If you want to change the look and feel of the default HTML Form so you have to apply some particular CSS Properties on the input box and submit button.

Example 2 – HTML forms style with basic CSS properties

<!DOCTYPE html>
<html>
  <head>
  	<style>
		.form 
		{
			background-color: #FACC5F;
			 padding: 10px;
		}
		input[type=text]
		{
			width: 100%;
			padding: 7px 10px;
			margin: 6px 0;
			display: inline-block;
			border: 1px solid black;
			border-radius: 4px;
			box-sizing: border-box;
			font-Weight: 100;
			font-size: 15px;
		}
		form label
		{
			font-Weight: 800;
			font-size: 20px;
		}
		input[type=submit] 
		{
			width: 120px;
			margin: 0 auto;
			background-color:grey;
			color: white;
			padding: 10px 15px;
			border: none;
			border-radius: 4px;
		}
		.submit
		{
			text-align:center;
		}
	</style>
  </head>
  
  <body>
	<div class="form">
	  <form>
		<label for="fname">First Name</label>
		<input type="text" id="fname" name="firstname" placeholder="Your First Name..">
		<label for="lname">Last Name</label>
		<input type="text" id="lname" name="lastname" placeholder="Your Last Name..">
		<div class="submit"><input type="submit" value="Submit"></div>
	  </form>
	</div>
  </body>
</html>

In the above code, we have used CSS Properties to enhance the look of the HTML Form.

HTML form input design example
Fig.2 – HTML form input text box and submit button design example

HTML Form Drop Down Design Example

The below code shows how to apply the CSS Properties to design the Drop-Down input form element.

Example 3 – Style a Drop Down element.

<!DOCTYPE html>
<html>
  <head>
  	<style>
		.dropdown
		{
			font-size: 14px; 
			height: 35px; 
			width: 420px
			background-color: red;
		}
		select
		{
			background-color: #add3a0;
		}
	</style>
  </head>
  
  <body>
	<div class="form">
	  <form>
	     <select name="Result" id="Result" class="dropdown">
			<option value="0">Please Select One Option</option>
			<option value="1">First Class</option>
			<option value="2">Second Class</option>
			<option value="3">Third Class</option>
			<option value="4">Fourth Class</option>
			<option value="5">Others</option>
		 </select>
	  </form>
	</div>
  </body>
</html>
HTML Form Drop Down Element Design Example
Fig.3 – HTML Form Drop Down Element Design Example

You also change the color of the options. The below code is used to apply the color to the options.

Example 4 – Drop-Down style with colors

<!DOCTYPE html>
<html>
  <head>
  	<style>
		.dropdown
		{
			font-size: 14px; 
			height: 35px; 
			width: 220px
		}
		select
		{
			background-color: #308b7d;
		}
		select option[value="0"] 
		{
			background-color:   #117868;
		}
		select option[value="1"] 
		{
			background-color:  #249281;
		}
		select option[value="2"] 
		{
			background-color:  #34a997;
		}
		select option[value="3"] 
		{
			background-color:  #49ceb9;
		}
		select option[value="4"] 
		{
			background-color: #79e5d4;
		}
		select option[value="5"] 
		{
			background-color: #93ebde;
		}
	</style>
  </head>
  
  <body>
	<div class="form">
	  <form>
	     <select name="Result" id="Result" class="dropdown">
			<option value="0">Please Select One Option</option>
			<option value="1">First Class</option>
			<option value="2">Second Class</option>
			<option value="3">Third Class</option>
			<option value="4">Fourth Class</option>
			<option value="5">Others</option>
		 </select>
	  </form>
	</div>
  </body>
</html>
Form design examples with color property
Fig.4 – Design examples with color property on drop down

HTML Input Type Textarea Design Examples

Textarea is not an input type. It is a tag <textarea>. Textarea means that area where you can write a message.

Example 5 – Textarea HTML tag design

<!DOCTYPE html>
<html>
  <head>
  	<style>
		textarea 
		{
			height: 100px;
			padding: 10px 15px;
			border: 2px solid darkblack;
			background-color: white;
			font-size: 14px;
			resize: vertical;
		}
	</style>
  </head>
  
  <body>
	<div>
	  <form>
	    <textarea>Write Some text here.....</textarea>		 
	  </form>
	</div>
  </body>
</html>

In the above code, we apply some css properties to the <textarea> tag to improve the looks.

Textarea HTML Input tag design
Fig.5 – Textarea HTML Input tag design example with CSS

HTML Checkbox Design Example with CSS Style Property

The default look of the checkbox is not appealing, with the use of CSS Properties you can improve the look and feel of checkbox.

Example 6 – Checkbox design example

<!DOCTYPE html>
<html>
  <head>
  	<style>
		.checkbox
		{
			padding-left: 17px;
			margin-bottom: 10px;
			font-size: 14px;
			color: orange;
			cursor: pointer;
		}
	</style>
  </head>
  
  <body>
	<div>
	  <form>
	    <label class="checkbox">
			<input type="checkbox" name="book1" value="Story">I have a Story Book.
		</label>
			<br />
		<label class="checkbox">	
			<input type="checkbox" name="book2" value="Comedy">I have a Comedy Book. 
		</label>
			<br />
		<label class="checkbox">
			<input type="checkbox" name="book3" value="Novel">I have a Novel.
		</label>
			<br />
		<label class="checkbox">
			<input type="checkbox" name="book4" value="Horror">I have a Horror Story Book. 
		</label>		
	  </form>
	</div>
  </body>
</html>

In the above code, we apply some css properties to the checkbox box input.

Checkbox Design Example with CSS Properties
Fig.6 – Checkbox Design Example Code with CSS Properties

Radio Button Input Design with CSS

The default visualization of the Radio Button is not appealing, with the use of CSS Properties you can improve the visualization of Radio Button.

Example 7 – Radio Button design example with CSS Style Properties

<!DOCTYPE html>
<html>
  <head>
  	<style>
		.radio
		{
			padding-left: 12px;
			margin-bottom: 8px;
			font-size: 17px;
			color: blue;
			cursor: pointer;
		}
	</style>
  </head>
  
  <body>
	<div>
	  <form>
	   <h3>Click on your Nearest City</h3>
	    <label class="radio">
			<input type="radio" name="city" value="Indore"> Indore
		</label>
			<br />
		<label class="radio">	
			 <input type="radio" name="city" value="Bhopal"> Bhopal 
		</label>
			<br />
		<label class="radio">
			<input type="radio" name="city" value="Delhi"> Delhi
		</label>
			<br />
		<label class="radio">
			<input type="radio" name="city" value="Mumbai"> Mumbai 
		</label>		
	  </form>
	</div>
  </body>
</html>

In the above code, we apply some css properties to the Radio buttons.

Radio Button Design Example with CSS Properties
Fig.7 – Radio Button Design Example Code with CSS Style Properties
Sponsor Banner
You can leave a response, or trackback from your own site.
Leave a Reply to the article


Learn CSS

Learning & Certifications
Follow Us
Facebook Icon   Linked In Icon   Twitter Icon  
Validation and Recognition

Valid CSS! Valid HTML5!

Powered by Wordpress