Input field styling using pseudo-class selectors for interactive states.

Field Structure

Fieldset wrapper with label-input pairing for semantic form structure.

<fieldset>
  <label for="none">Name</label>
  <input type="text" id="none" placeholder="placeholder" required/>
</fieldset>

Parent Focus State

Apply styles to parent elements when child input receives focus using :focus-within.

  fieldset:focus-within label {
    font-weight: bold;
  }

Placeholder State

Style input differently when placeholder text is visible using :placeholder-shown.

  input:placeholder-shown {
    background-color: transparent;
  }

User Validation

Real-time validation feedback with :user-invalid for user-modified invalid fields.

  input:user-invalid {
    border: 1px solid red;
  }

Focus Visibility

Enhanced focus styles using :focus-visible for keyboard navigation.

  input:focus-visible {
    background-color: rgba(255, 255, 255, .5);
    border: 2px solid cornflowerblue;
  }