Color

Recipe 5.1 Work with color

Sample:

Please enter a valid e-mail address

Code:

<style>
   .error {
    color: #D52A2A;
  }

   label {
    display: block;
  }

   input:has(+.error) {
    margin-block-end: 0.2rem;
  }
</style>


<div>
  <label for="email">Your e-mail address</label>
  <input type="email" id="email" required aria-invalid="true" value="kubidus21@" aria-describedby="error">

  <div id="error" class="error">
    <svg viewBox="0 0 640 640" width="16" fill="currentColor">
      <path d="M640 128 512 0 320 192 128 0 0 128l192 192L0 512l128 128 192-192 192 192 128-128-192-192 192-192z">
    </svg>

    Please enter a valid e-mail address
  </div>
</div>