【CSS】疑似クラス:user-valid と :user-invalid について

    <div class="container">

        <form class="demo-form">
            <div class="form-group">
                <label>
                    メールアドレス（必須）
                    <input type="email" name="email" required placeholder="foo@example.com" class="demo-input">
                </label>
                <p class="hint">有効なメールアドレスを入力すると緑色の枠線、無効な場合は赤色の枠線が表示されます。</p>
            </div>

            <div class="form-group">
                <label>
                    パスワード（8文字以上）
                    <input type="password" name="password" required minlength="8" placeholder="8文字以上"
                        class="demo-input">
                </label>
                <p class="hint">8文字以上入力すると緑色、8文字未満でフォーカスを外すと赤色になります。</p>
            </div>

            <div class="form-group">
                <label>
                    URL
                    <input type="url" name="url" placeholder="https://example.com" class="demo-input">
                </label>
                <p class="hint">有効なURLを入力すると緑色になります。</p>
            </div>
        </form>
    </div>

.container {
  padding: 40px;
  max-width: 900px;
  margin: 0 auto;
}


/* デモフォーム */
.demo-form {
  background-color: #f9f9f9;
  padding: 2em;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  margin: 2em 0;
}

.form-group {
  margin-bottom: 2em;
}

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5em;
  color: #2a2a2a;
}

.demo-input {
  width: 100%;
  padding: 0.75em;
  font-size: 1em;
  border: 2px solid #000;
  border-radius: 4px;
  transition: border-color 0.3s ease;
  box-sizing: border-box;
}

.demo-input:focus {
  outline: none;
  border-color: #3b82f6;
}

.hint {
  font-size: 0.9em;
  color: #666;
  margin-top: 0.5em;
  font-style: italic;
}



/* :user-valid と :user-invalid のスタイル */
.demo-input:user-valid {
  border: 2px solid #16a34a; /* 緑 */
}

.demo-input:user-invalid {
  border: 2px solid #dc2626; /* 赤 */
}

/* デフォルトのスタイル */
input {
  border: 2px solid #000;
}