CSS Forms

Styling Input Fields

You can style input fields using properties like width, padding, border, and border-radius.

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

Styling on Focus

The :focus pseudo-class is triggered when an input field gets focus (is clicked on or tabbed to). It's common to change the border or background color on focus to provide visual feedback to the user.

input[type=text]:focus {
  border: 3px solid #555;
  background-color: lightblue;
}

Styling Buttons

Form submit buttons can be styled with properties like background-color, color, padding, and cursor to make them more interactive and visually appealing.

input[type=submit] {
  background-color: #04AA6D;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  cursor: pointer;
}