Form Styling

Form styling is an important aspect of web design. Stylish inputs influence the user experience significantly. CSS lets you transform the default appearance of form elements into an attractive and consistent design.

Every form element needs special attention: text input, textarea, select, checkbox, radio, and label. Each has its own styling characteristics. It is also important to pay attention to states such as focus, valid, invalid, and disabled.

Modern form layouts use Flexbox or CSS Grid for neat alignment. Validation states (success, error) help users understand the status of their input.

Code Example

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  body {
    font-family: 'Segoe UI', Arial, sans-serif;
    padding: 40px 20px;
    background: #f0f2f5;
    display: flex;
    justify-content: center;
  }

  .form-container {
    width: 100%;
    max-width: 500px;
    background: white;
    padding: 35px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  }

  .form-container h2 {
    margin: 0 0 5px;
    color: #1a1a2e;
  }

  .form-container .subtitle {
    color: #888;
    margin-bottom: 25px;
    font-size: 0.9em;
  }

  /* Form Groups */
  .form-group {
    margin-bottom: 20px;
  }

  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
  }

  /* Labels */
  .form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 0.9em;
    color: #333;
  }

  .form-group label .required {
    color: #e74c3c;
  }

  /* Text Input & Textarea */
  .form-control {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1em;
    font-family: inherit;
    color: #333;
    background: #fafafa;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    box-sizing: border-box;
  }

  .form-control:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
    background: white;
  }

  .form-control::placeholder {
    color: #aaa;
    font-style: italic;
  }

  textarea.form-control {
    resize: vertical;
    min-height: 100px;
  }

  /* Select */
  .form-select {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1em;
    font-family: inherit;
    color: #333;
    background: #fafafa;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
  }

  .form-select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
  }

  /* Validation States */
  .form-control.success {
    border-color: #00b894;
  }

  .form-control.error {
    border-color: #e74c3c;
  }

  .validation-message {
    font-size: 0.82em;
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .validation-message.success {
    color: #00b894;
  }

  .validation-message.error {
    color: #e74c3c;
  }

  /* Custom Checkbox */
  .checkbox-group {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
  }

  .checkbox-group input[type="checkbox"] {
    display: none;
  }

  .checkbox-custom {
    width: 22px;
    height: 22px;
    border: 2px solid #ccc;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
  }

  .checkbox-group input:checked + .checkbox-custom {
    background: #667eea;
    border-color: #667eea;
  }

  .checkbox-group input:checked + .checkbox-custom::after {
    content: '✓';
    color: white;
    font-size: 14px;
    font-weight: bold;
  }

  .checkbox-group .checkbox-label {
    font-size: 0.9em;
    color: #555;
  }

  /* Custom Radio */
  .radio-group {
    display: flex;
    gap: 20px;
  }

  .radio-option {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
  }

  .radio-option input[type="radio"] {
    display: none;
  }

  .radio-custom {
    width: 22px;
    height: 22px;
    border: 2px solid #ccc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
  }

  .radio-option input:checked + .radio-custom {
    border-color: #667eea;
  }

  .radio-option input:checked + .radio-custom::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #667eea;
  }

  .radio-option .radio-label {
    font-size: 0.9em;
    color: #555;
  }

  /* Submit Button */
  .btn-submit {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: box-shadow 0.2s, transform 0.2s;
  }

  .btn-submit:hover {
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    transform: translateY(-1px);
  }

  .btn-submit:active {
    transform: translateY(0);
  }
</style>
</head>
<body>
  <div class="form-container">
    <h2>Account Registration</h2>
    <p class="subtitle">Fill out the form below to create a new account</p>

    <form>
      <div class="form-row">
        <div class="form-group">
          <label>First Name <span class="required">*</span></label>
          <input type="text" class="form-control" placeholder="John" value="John">
          <div class="validation-message success">✓ Looks good!</div>
        </div>
        <div class="form-group">
          <label>Last Name <span class="required">*</span></label>
          <input type="text" class="form-control error" placeholder="Doe" value="J">
          <div class="validation-message error">✗ Minimum 2 characters</div>
        </div>
      </div>

      <div class="form-group">
        <label>Email <span class="required">*</span></label>
        <input type="email" class="form-control success" placeholder="[email protected]" value="[email protected]">
        <div class="validation-message success">✓ Email valid</div>
      </div>

      <div class="form-group">
        <label> Password <span class="required">*</span></label>
        <input type="password" class="form-control error" placeholder="Minimum 8 characters">
        <div class="validation-message error">✗ Password too short</div>
      </div>

      <div class="form-group">
        <label>Gender</label>
        <div class="radio-group">
          <label class="radio-option">
            <input type="radio" name="gender" checked>
            <span class="radio-custom"></span>
            <span class="radio-label">Laki-laki</span>
          </label>
          <label class="radio-option">
            <input type="radio" name="gender">
            <span class="radio-custom"></span>
            <span class="radio-label">Perempuan</span>
          </label>
          <label class="radio-option">
            <input type="radio" name="gender">
            <span class="radio-custom"></span>
            <span class="radio-label">Other</span>
          </label>
        </div>
      </div>

      <div class="form-group">
        <label>Country</label>
        <select class="form-select">
          <option value="">Select country...</option>
          <option value="id" selected>Indonesia</option>
          <option value="my">Malaysia</option>
          <option value="sg">Singapore</option>
          <option value="th">Thailand</option>
        </select>
      </div>

      <div class="form-group">
        <label>Bio</label>
        <textarea class="form-control" placeholder="Ceritakan tentang diri Anda..."></textarea>
      </div>

      <div class="form-group">
        <label class="checkbox-group">
          <input type="checkbox" checked>
          <span class="checkbox-custom"></span>
          <span class="checkbox-label">Saya menyetujui Syarat & Ketentuan</span>
        </label>
      </div>

      <div class="form-group">
        <label class="checkbox-group">
          <input type="checkbox">
          <span class="checkbox-custom"></span>
          <span class="checkbox-label">Subscribe to newsletter</span>
        </label>
      </div>

      <button type="submit" class="btn-submit">Sign Up Now</button>
    </form>
  </div>
</body>
</html>

Code Explanation

.form-control base style: Padding, border, border-radius, and transitions provide a modern look. box-sizing: border-box ensures padding does not add to the total width.

:focus state: A colored border and box-shadow provide clear visual feedback when the input is active. A thin shadow ring creates a "glow" effect.

::placeholder: Styling the placeholder text with a lighter color and italics distinguishes it from the input value.

appearance: none on select: Removes the default dropdown style, allowing custom styling. A background SVG is used as the custom arrow indicator.

Validation states: The .success and .error classes on inputs change the border color. Validation messages provide matching text feedback.

Custom checkbox/radio: The real input is hidden (display: none), and a pseudo-element or sibling element takes its place as the visual checkbox. The checked state is detected using input:checked + .checkbox-custom.

Form grid layout: form-row uses CSS Grid with grid-template-columns: 1fr 1fr for two input columns side by side.

Everyday Use Cases

Registration form: A registration form with real-time validation, helper text placeholders, and visual feedback for every field.

Contact form: A simple form with name, email, subject, and message. Validation states help users fill it in correctly.

Profile settings: A profile settings form with avatar upload, a bio textarea, and preference selections.

Checkout form: A payment form with a grid layout for space efficiency, and credit card validation.

Conclusion

Good form styling combines aesthetics and usability. Start with a consistent base .form-control style, add focus states for accessibility, validation states for feedback, and custom styling for checkboxes/radios. Use CSS Grid or Flexbox for a neat layout. Always include helpful placeholder text and clear validation messages.