CSS Form

CSS Form Example 1

2) CSS HTML Form Designs Example

Test it Now

3) CSS HTML Form Designs Example

Test it Now

Input Fields Style

Use the width property in the input field:

First_Name

Example:-

<!DOCTYPE html>
<html>
<head>
<style> 
input {
  width: 100%;
}
</style>
</head>
<body>
<h2>Input field Width:</h2>

<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname">
</form>

</body>
</html>

Test it Now

Inputs Field Padding

Use the padding property is used to add space inside the text field.

First_Name Last_Name

Example:-

 <!DOCTYPE html>
<html>
<head>
<style> 
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}
</style>
</head>
<body>

<p>Padding text fields:</p>

<form>
  <label for="fname">First_Name</label>
  <input type="text" id="fname" name="fname">
  <label for="lname">Last_Name</label>
  <input type="text" id="lname" name="lname">
</form>

</body>
</html>

 

Test it Now

Bordered Inputs Text Field

border property is used to change the border size and color, and use the border-radius property is used to add rounded corners:

First_Name

Example:-

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 2px solid red;
  border-radius: 4px;
}
</style>
</head>
<body>

<p>Text fields with borders:</p>

<form>
  <label for="fname">First_Name</label>
  <input type="text" id="fname" name="fname">
  <label for="lname">Last_Name</label>
  <input type="text" id="lname" name="lname">
</form>

</body>
</html>

 

Test it Now

Input image icon

Use the background-image property and position it with thebackground-position property add a large left padding to reserve the space of the icon.

Example:-

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text] {
  width: 100%;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  background-image: url('/css/images/search.png');
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding: 12px 20px 12px 40px;
}
</style>
</head>
<body>

<p>Input with icon:</p>

<form>
  <input type="text" name="search" placeholder="Search..">
</form>

</body>
</html>
 

Test it Now

Animated Input Search Box

Use the CSS transition property to animate the width of the search input when it gets focus.

Example:-

 <!DOCTYPE html>
<html>
<head>
<style> 
input[type=text] {
  width: 130px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  background-image: url('/css/images/search.png');
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding: 12px 20px 12px 40px;
  transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
  width: 100%;
}
</style>
</head>
<body>

<p>Animated input search :</p>

<form>
  <input type="text" name="search" placeholder="Search..">
</form>

</body>
</html>
   
 

Test it Now

Styling Menus Color

Example:-

<!DOCTYPE html>
<html>
<head>
<style> 
select {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}
</style>
</head>
<body>

<p>A style selected menu.</p>

<form>
  <select id="country" name="country">
   <option value="usa">India</option>
    <option value="usa">Australia</option>
    <option value="usa">USA</option>
   <option value="usa">Canada</option>
     <option value="usa">Chin</option>
     <option value="usa">Pakistan</option>
  </select>
</form>

</body>
</html>


 

Test it Now

Responsive Form

Example:-

Test it Now

Next TopicCSS Link

← prev next →

CSS Tutorials

CSS Properties

CSS Form

CSS Form Example 1

2) CSS HTML Form Designs Example

3) CSS HTML Form Designs Example

Input Fields Style

Example:-

Inputs Field Padding

Example:-

Bordered Inputs Text Field

Example:-

Input image icon

Example:-

Animated Input Search Box

Example:-

Styling Menus Color

Example:-

Responsive Form

Example:-