CSS :optional Pseudo Class - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* Styles applied only to optional inputs */
input:optional {
  border: 2px dashed #999;
  background-color: #fafafa;
  padding: 8px;
  border-radius: 4px;
}

/* For contrast: styles applied to required inputs */
input:required {
  border: 2px solid #2ecc71;
  padding: 8px;
  border-radius: 4px;
}

/* General styling for the form layout */
.field-group {
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
  width: 300px;
}

label {
  margin-bottom: 5px;
  font-family: sans-serif;
  font-size: 14px;
}</style></head><body><form>
  <div class="field-group">
    <label for="user">Username (Required):</label>
    <input type="text" id="user" name="user" required>
  </div>

  <div class="field-group">
    <label for="email">Email (Optional):</label>
    <input type="email" id="email" name="email">
  </div>

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