<html>
<head>
<title>Abakada CSS Demo: checked Pseudo-Class</title>
<link rel="stylesheet" href="/shared/netdemos.css">
<style>
input:checked {
box-shadow: 0 0 5px 5px maroon;
}
input:checked + label {
font-style: italic;
}
option:checked {
background: steelblue; color: khaki;
font-weight: bold;
}
</style>
</head>
<body>
<div class="header"><h2>Abakada CSS Demo: <b>checked</b> Pseudo-Class</h2></div>
<hr size=1 width=92%>
<center>
<h4>This example demonstrates use of the <b>:checked</b> pseudo-class to set styles for elements in a checked or selected state.</h4>
<table cellpadding=5>
<tr valign="top">
<td>
<p align="center"><b>The president I like:</b></p>
<table cellpadding=5 style="background-color: beige; border: 2px inset">
<tr><td><input id=radio1 type=radio name=choices> <label for=radio1>George Washington</label></td>
<tr><td><input id=radio2 type=radio name=choices> <label for=radio2>Abraham Lincoln</label></td>
<tr><td><input id=radio3 type=radio name=choices> <label for=radio3>John F. Kennedy</label></td>
<tr><td><input id=radio4 type=radio name=choices> <label for=radio4>Dwight Eisenhower</label></td>
</table>
</td>
<td><p align="center"><b>Yogurt flavors I like:</b></p>
<table cellpadding=5 style="background-color: beige; border: 2px inset">
<tr><td><input type=checkbox id=check1> <label for=check1>Strawberry</label>
<td><input type=checkbox id=check2> <label for=check2>Vanilla</label></td>
<tr><td><input type=checkbox id=check3> <label for=check3>Campina</label></td>
<td><input type=checkbox id=check4> <label for=check4>Custard</label></td>
<tr><td><input type=checkbox id=check5> <label for=check5>Pavlova</label></td>
<td><input type=checkbox id=check6> <label for=check6>Raspberry</label></td>
</table></td>
</td>
<td><p align="center"><b>The cars I like:</b></p>
<select style="background-color: beige; border: 2px inset; padding: 5">
<option>Alpha Romeo
<option>BMW
<option>Ferrari
<option>Mercedes-Benz
<option>Porsche
<option>Range Rover
</select>
</td></tr>
</table>
</center>
<hr size=1 width=92%>
<!-- #include virtual="~/shared/viewsrc.inc" -->
</body>
</html>