Dynamic Forms

CSS can " understand " the state of text inside input fields without JavaScript help.

1. :placeholder-shown

Triggers while user hasn't started entering text and sees the hint (placeholder).

• Why: Make the hint prettier or implement " floating label " effect.

2. :valid and :invalid

Trigger if entered data matches the type and rules (e.g., type="email" or required attribute).

input:invalid {
  border-bottom: 2px solid red;
}

input:valid {
  border-bottom: 2px solid green;
}