<html>
<head>
<title>required/optional CSS pseudoclasses part 6</title>
<style>
input:optional { background: red; }
input { background: red; }
input:required { background: lime; }
</style>
<script language="JavaScript" type="text/javascript">
function log(message) {
document.getElementById("console").innerHTML += "<li>"+message+"</li>";
}
function test() {
if (window.testRunner)
testRunner.dumpAsText();
v = document.getElementsByName("victim");
for (i = 0; i < v.length; i++)
if (document.defaultView.getComputedStyle(v[i], null).getPropertyValue('background-color') == "rgb(0, 255, 0)")
log("SUCCESS");
else
log("FAILURE");
}
</script>
</head>
<body onload="test()">
<p>All controls should have a green background.</p>
<input type="text" name="victim" required/>
<input type="password" name="victim" required/>
<input type="search" name="victim" required/>
<input type="url" name="victim" required/>
<input type="telephone" name="victim" required/>
<input type="email" name="victim" required/>
<input type="number" name="victim" required/>
<input type="checkbox" name="victim" required/>
<input type="radio" name="victim" required/>
<input type="file" name="victim" required/>
<hr>
<ol id="console"></ol>
</body>
</html>
Codebase Browser
chromium