CSS Forms

❮ Previous Home Next ❯

Properly coded HTML and CSS can transform the boring look of an HTML form into a professional one.

Try this code ❯



Input Field

Setting width property to 100%:



Example

input {
  width: 100%;
}

For more information see all input types.




Padding Input

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

The box-sizing: border-box; the padding and borders are included in the total width and height of the elements.



Example

input[type=text] {
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
}



Border and Border Radius Input

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



Example

input[type=text] {
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
  border: 4px solid red;
  border-radius: 8px;
}






Background Color Input

The background-color property is used to add a background color to the input, and the color property is used to change the text color:



Example

input[type=text] {
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
  border: none;
  background-color: #1A73E8;
  color: white;
}



:focus Input Selector

By using the :focus selector you can change input field look it element is focused:



Example

input[type=text]:focus {
  background-color: #1A73E8;
  color: white;
}




Example

input[type=text]:focus {
  border: 3px solid #1A73E8;
}



Styling Input Buttons

You can customize input buttons using CSS:

Submit


Example

input[type=submit] {
  width: 100%;
  background-color: #1A73E8;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  outline: none;
}

input[type=submit]:hover {
  background-color: black;
}



Styling Textarea

You can customize textarea using CSS and the resize property to prevent textareas from being resized.

outline property is used to remove browser default outline on focus.



Example

textarea {
  width: 100%;
  height: 150px;
  padding: 16px;
  box-sizing: border-box;
  border: 2px solid #eee;
  border-radius: 4px;
  background-color: #f1f1f1;
  resize: none;
  outline: none;
}

textarea:focus {
  border: 2px solid #1A73E8
}



Setting icon/image to Input

You can set icon inside the input by using the background-image property and position it with the background-position property.



Example

input[type=text] {
  width: 100%;
  box-sizing: border-box;
  border: 2px solid #eee;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  background-image: url('search.jpg');
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding: 12px 20px 12px 40px;
}
❮ Previous Home Next ❯