CSS forms, TutorialsPoint, CSS forms Tutorial

CSS Forms

The look of an HTML form can be greatly improved with CSS. Different types of CSS forms - Input Fields, Padded Inputs, Bordered Inputs, Focused Inputs, Input with icon/image, Animated Search Input, Textareas ect,.

Input Styles

<!DOCTYPE html>
<html>
<head>
<title>CSS Forms</title>
<style type="text/css"> 
  .static {width: 100%;}
  
  .padding { width: 100%; padding:10px 15px; margin: 5px 0; box-sizing: border-box; }
  
  .bordered_forms{ width:97%; padding:10px 15px; margin:5px auto 15px; border:2px solid #0099da;}
  .bordered_forms_1{ width:97%; padding:10px 15px; margin:5px auto; border:none; border-bottom:2px solid #0099da;}
  
  .focus_input{width:97%; padding:10px 15px; border:2px solid #0099da; margin:5px auto 15px;}
  .focus_input[type=text]:focus { background-color:#85C2C2;}
</style>
</head>

<body>
 
<h3>Static Input Form</h3>
<form>
  <label>Sample Name</label>
  <input type="text" name="name" class="static" placeholder="Sample Name">
</form>
 
<h3>Padding Input Forms</h3>
<form>
  <label>Sample Name</label>
  <input type="text" name="name" class="padding" placeholder="Sample Name">
  <label>Password</label>
  <input type="password" name="password" class="padding" placeholder="Password">
</form>
 
<h3>Bordered Input Forms</h3>
<form>
  <label>Email ID</label>
  <input type="email" name="email" class="bordered_forms" placeholder="example@gmail.com">
  <label>Password</label>
  <input type="password" name="password" class="bordered_forms_1" placeholder="Password">
</form>
 
<h3>Focus Input Form</h3>
<form>
  <label>Sample Name</label>
  <input type="text" name="name" class="focus_input" placeholder="Sample Name">
</form>
 
 
</body>
</html>

Output :

Static Input Form

Padding Input Forms

Bordered Input Forms

Focus Input Form

Input with icon/image and Animation Search Icons

<!DOCTYPE html>
<html>
<head>
<title>CSS Forms</title>
<style type="text/css"> 
 
.search_icon[type=text]{ 
background-color:#FFF; 
background-image: url(images/search_icon.png); 
background-position: 5px;  
background-repeat: no-repeat; 
padding-left: 40px; 
padding:10px 10px 10px 40px; 
width:96%; 
border:2px solid #0099da;
}
  
.anim_search_icon[type=text] { 
width: 200px; 
box-sizing: border-box; 
border: 2px solid #ccc; 
border-radius: 2px; 
font-size: 16px;  
background-color: white; 
background-image: url(images/search_icon.png);  
background-position: 5px;  
background-repeat: no-repeat; 
padding: 12px 20px 12px 40px;  
-webkit-transition: width 0.4s ease-in-out; 
 transition: width 0.4s ease-in-out; 
}
 
.anim_search_icon[type=text]:focus {  width: 99%; }
  
</style>
</head>
<body>
 
<h3>Input with search icon</h3>
<form>
 <input type="text" name="search" class="search_icon" placeholder="Search Here">
</form>
 
<h3>Input with search icon with Animation</h3>
<form>
 <input type="text" name="search" class="anim_search_icon" placeholder="Search Here">
</form>
 
</body>
</html>

Output :

Input with search icon

Input with search icon with Animation

Textarea Forms

<!DOCTYPE html>
<html>
<head>
<title>CSS Forms</title>
<style type="text/css"> 
  .textarea {width: 100%; padding:10px 20px; margin:10px auto; border:2px solid #0099da;}
</style>
</head>
<body>
 
<h3>Textarea Froms</h3>
<form>
  <label>Address</label>
  <textarea cols="" rows="4" class="textarea" placeholder="Address"></textarea>
</form>
 
</body>
</html>

Output :

Textarea Froms

CSS Tutorial