lor: green;
}
/* matches  some of the time, when the prior selector does NOT match. */
input:invalid {
	border-color: red;
}
/* matches  some of the time, whether the input is valid or invalid */
input:focus {
	border-color: yellow;
}</style>
<title>Valid, Invalid, Focus</title>
</head>
<body>
<ul>
<li>
<input type="text" pattern="valid" value="valid">
</li>
<li>
<input type="text" pattern="valid" value="invalid">
</li>
<li>
<input type="text" pattern="valid" value="autofocus" autofocus>
</li>
</ul>
</body>