CSS Form Styling: Examples and Best Practices

CSS Form Styling

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Styled Form</title>
  <style>
    /* Form Container */
    .form-container {
      max-width: 400px;
      margin: 0 auto;
    }

    /* Form Input */
    .form-input {
      width: 100%;
      padding: 10px;
      margin-bottom: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }

    /* Form Button */
    .form-button {
      padding: 10px 20px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    /* Form Button Hover Effect */
    .form-button:hover {
      background-color: #45a049;
    }
  </style>
</head>
<body>
  <div class="form-container">
    <form>
      <input type="text" class="form-input" placeholder="Name">
      <input type="email" class="form-input" placeholder="Email">
      <input type="password" class="form-input" placeholder="Password">
      <input type="checkbox"> Remember me<br>
      <button type="submit" class="form-button">Submit</button>
    </form>
  </div>
</body>
</html>

Code Output

CSS Form Styling

CSS can be used to style various elements of an HTML form, including text inputs, checkboxes, radio buttons, select dropdowns, and buttons. You can apply different styles to these form elements to match the design of your website and enhance the user experience.