<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;
}