CSS :required Pseudo Class - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* Style only the inputs that have the 'required' attribute */
input:required {
  border: 2px solid #ff7f50; /* Coral border */
  background-color: #fff5f2;
}

/* Optional: Style the input when it's required AND has valid text */
input:required:valid {
  border: 2px solid #2ecc71; /* Green border */
  background-color: #f0fff4;
}

/* Basic styling for layout */
.form-group {
  margin-bottom: 15px;
  font-family: sans-serif;
}

label {
  display: block;
  margin-bottom: 5px;
}

input {
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
  outline: none;
}</style></head><body><form>
  <div class="form-group">
    <label for="name">Name (Required):</label>
    <input type="text" id="name" name="name" required>
  </div>

  <div class="form-group">
    <label for="nickname">Nickname (Optional):</label>
    <input type="text" id="nickname" name="nickname">
  </div>

  <button type="submit">Submit</button>
</form></body></html>