CSS :indeterminate Pseudo Class
The CSS: indeterminate pseudo-class selects a user interface element that has an indeterminate state.
The: indeterminate pseudo-class selects:
- Checkboxes ( <input type="checkbox">) with indeterminate attribute set to "true".
- Radio buttons (<input type=" radio">) when the radio button group does not contain a checked radio button.
- Progress element (<progress>) with no value attribute.
The indeterminate state of the checkbox can be set only via JavaScript. Radio buttons and progress elements can be set in HTML.
The : checked pseudo-class is used to style the checked state of checkbox and radio buttons. The: indeterminate pseudo-class can be linked with other selectors such as hover providing hover styles for the element that is in an indeterminate state.
Version¶
CSS Basic User Interface Module Level 3
CSS Selectors Level 4
Disabled Elements — HTML5
Syntax¶
:indeterminate {
css declarations;
}Example of the: interminate selector:¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input:indeterminate {
box-shadow: 0 0 2px 2px #666;
}
</style>
</head>
<body>
<h2>Indeterminate selector example</h2>
<form>
<input type="checkbox" id="box"> Checkbox
<script>
var checkbox=document.getElementById("box");
checkbox.indeterminate=true;
</script>
</form>
</body>
</html>In the following example, the entire group is in an indeterminate state when no option is selected.
Example of the: interminate selector with no option selected:¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
label {
margin-right: .5em;
position: relative;
top: 1px;
}
input[type="radio"]:indeterminate + label {
color: #8ebf42;
}
</style>
</head>
<body>
<h2>:indeterminate selector example</h2>
<form>
<input type="radio" name="option" value="yes" id="yes">
<label for="yes">Yes</label>
<input type="radio" name="option" value="no" id="no">
<label for="no">No</label>
<input type="radio" name="option" value="don't know" id="don't-know">
<label for="don't-know">Don't know</label>
</form>
</body>
</html>
0 Comments
CAN FEEDBACK
Emoji