The UI element states pseudo classes enable you can to specify the appearance of UI elements such as buttons and check boxes.Here we create a Web page named UIelementstatespc.html to learn how to use the UI element states pseudo-classes.
<!doctype html>
<html>
<head>
<title>UI element states pseudo-classes</title>
<style type="text/css">
button.style{
background-color:lime;
}
button.style:disabled
{background-color:magenta;
color:white;
}
button.style:enabled
{
background-color:blue;
color:yellow;
}
span
{
background-color:orange;
}
input:checked + span
{background-color:green;
color:white;
}
input:indeterminate + span
{background-color:red;
}
</style>
</head>
<body>
<form action="#">
<p>Default style:</p>
<BUTTON disabled="disabled">disabled</BUTTON>
<BUTTON>enabled</BUTTON><br>
<INPUT type="checkbox" checked="checked">checked by default
<INPUT type="checkbox">Not checked by default<br>
<INPUT type="radio" checked="checked">checked by default
<INPUT type="radio">Not checked by default<br>
<p>Using UI element states:</p>
<BUTTON class="style" disabled="disabled">disabled</BUTTON>
<BUTTON class="style">enabled</BUTTON>
<INPUT type="checkbox" checked="checked"><SPAN>checked by default</SPAN>
<INPUT type="checkbox"><SPAN>not checked by default</SPAN><br>
<INPUT type="radio" checked="checked"><SPAN>checked by default</SPAN>
<INPUT type="radio"><SPAN>not checked by default</SPAN><br>
<INPUT type="checkbox" id="here"><SPAN>Made Indeterminate by scripting</SPAN>
</form>
<SCRIPT type="text/javascript">
window.onload=function(){
document.getElementById("here").indeterminate=true;}
</SCRIPT>
</body>
</html>
The output of the above Web page is:
In this output the :enabled and :disabled pseudo-classes are used to specify the appearance of the button elements. the :checked pseudo-class is used to specify the appearance of checkbox and radio button controls. the :indeterminate pseudo-class is used to specify the undetermined states of a checkbox control.
<!doctype html>
<html>
<head>
<title>UI element states pseudo-classes</title>
<style type="text/css">
button.style{
background-color:lime;
}
button.style:disabled
{background-color:magenta;
color:white;
}
button.style:enabled
{
background-color:blue;
color:yellow;
}
span
{
background-color:orange;
}
input:checked + span
{background-color:green;
color:white;
}
input:indeterminate + span
{background-color:red;
}
</style>
</head>
<body>
<form action="#">
<p>Default style:</p>
<BUTTON disabled="disabled">disabled</BUTTON>
<BUTTON>enabled</BUTTON><br>
<INPUT type="checkbox" checked="checked">checked by default
<INPUT type="checkbox">Not checked by default<br>
<INPUT type="radio" checked="checked">checked by default
<INPUT type="radio">Not checked by default<br>
<p>Using UI element states:</p>
<BUTTON class="style" disabled="disabled">disabled</BUTTON>
<BUTTON class="style">enabled</BUTTON>
<INPUT type="checkbox" checked="checked"><SPAN>checked by default</SPAN>
<INPUT type="checkbox"><SPAN>not checked by default</SPAN><br>
<INPUT type="radio" checked="checked"><SPAN>checked by default</SPAN>
<INPUT type="radio"><SPAN>not checked by default</SPAN><br>
<INPUT type="checkbox" id="here"><SPAN>Made Indeterminate by scripting</SPAN>
</form>
<SCRIPT type="text/javascript">
window.onload=function(){
document.getElementById("here").indeterminate=true;}
</SCRIPT>
</body>
</html>
The output of the above Web page is:
In this output the :enabled and :disabled pseudo-classes are used to specify the appearance of the button elements. the :checked pseudo-class is used to specify the appearance of checkbox and radio button controls. the :indeterminate pseudo-class is used to specify the undetermined states of a checkbox control.
In first Figure we can see a checkbox mode indeterminate by scripting which shows an undetermined state. When you unselect this checkbox we get the output as shown in Second figure.
Now select the checkbox which is labeled as Made indeterminate by scripting. We get the Output as shown in Figure.
No comments:
Post a Comment