<form>
  <div class="field">
    <label for="input">Input</label>
    <input id="input" required="required" aria-describedby="input-message" />
    <div id="input-message" class="message">
      <ul class="validation" role="list">
        <li data-matches="valid">Currently <code>:valid</code></li>
        <li data-matches="invalid">Currently <code>:invalid</code></li>
        <li data-matches="user-valid">Currently <code>:user-valid</code></li>
        <li data-matches="user-invalid">Currently <code>:user-invalid</code></li>
      </ul>
    </div>
  </div>
  <div class="field">
    <label for="select">Select</label>
    <select id="select" required="required" aria-describedby="select-message">
      <option value="">Choose an option</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div id="select-message" class="message">
      <ul class="validation" role="list">
        <li data-matches="valid">Currently <code>:valid</code></li>
        <li data-matches="invalid">Currently <code>:invalid</code></li>
        <li data-matches="user-valid">Currently <code>:user-valid</code></li>
        <li data-matches="user-invalid">Currently <code>:user-invalid</code></li>
      </ul>
    </div>
  </div>
  <div class="field">
    <label for="textarea">Textarea</label>
    <textarea id="textarea" required="required" aria-describedby="textarea-message"></textarea>
    <div id="textarea-message" class="message">
      <ul class="validation" role="list">
        <li data-matches="valid">Currently <code>:valid</code></li>
        <li data-matches="invalid">Currently <code>:invalid</code></li>
        <li data-matches="user-valid">Currently <code>:user-valid</code></li>
        <li data-matches="user-invalid">Currently <code>:user-invalid</code></li>
      </ul>
    </div>
  </div>
</form>

@import url("https://fonts.googleapis.com/css2?family=Anybody:ital,wght@0,800;1,700&display=swap");

:root {
  --state-color: black;
  --bg: white;
}

input:user-valid,
select:user-valid,
textarea:user-valid {
  --state-color: green;
  --bg: linear-gradient(45deg in oklch, lime, #02c3ff);
}

input:user-invalid,
select:user-invalid,
textarea:user-invalid {
  --state-color: red;
  --bg: linear-gradient(15deg in oklch, #ea00ff, #ffb472);
}

input,
select,
textarea {
  appearance: none;
  border: 3px solid var(--state-color);
  background: var(--bg);
  border-radius: 0.5rem;
  box-sizing: border-box;
  font: inherit;
  padding: 0.5rem;
  inline-size: 100%;

  &:focus {
    outline: 3px dashed black;
  }
}

body {
  font-family: "Anybody", sans-serif;
  padding: 2rem;
}