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

input:user-valid,
select:user-valid,
textarea:user-valid {
	--state-color: green;
}

input:user-invalid,
select:user-invalid,
textarea:user-invalid {
	--state-color: red;
}