CSS indeterminate Selector
Jika diartikan kedalam Bahasa Indonesia, indeterminate artinya adalah yang tidak menentukan. Di dalam CSS, :indeterminate adalah CSS pseudo-class yang digunakan untuk merepresentasikan element <input type="checkbox"> yang mana property indeterminate tersebut dinyatakan true dengan kode javascript. Artinya, style akan berlaku jika dichecked dan dideklarasikan true oleh javascript. :indeterminate digunakan oleh beberapa browser bersamaan dengan element <progress> untuk menentukaan keadaan indeterminate (yang tidak menentukan).
Syntax
Penggunaan Sintaksis CSS indeterminate
:indeterminate {
Property: Value; /* Deklarasi CSS */
}Example
Contoh CSS indeterminate
<h1>Laki-laki Idaman</h1>
<ul>
<input type="checkbox"><span>Kaya tapi pelit</span> <br />
<input type="checkbox"><span>Ganteng tapi miskin</span> <br />
<input type="checkbox"><span class="ya">Udah kaya, gak pelit, ganteng lagi</span> <br />
</ul>
input, span.ya {
color: blue;
}
:indeterminate + span {
color: red
}
document.getElementsByTagName("input")[0].indeterminate = true;
document.getElementsByTagName("input")[1].indeterminate = true;
Kode diatas dapat dilihat hasilnya pada contoh lengkap demo editor dibawah ini:
Contoh Lengkap
Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo CSS indeterminate selector - apacara.com</title>
<style>
input, span.ya {
color: blue;
}
:indeterminate + span {
color: red
}
</style>
</head>
<body>
<h1>Laki-laki Idaman</h1>
<ul>
<input type="checkbox"><span>Kaya tapi pelit</span> <br />
<input type="checkbox"><span>Ganteng tapi miskin</span> <br />
<input type="checkbox"><span class="ya">Udah kaya, gak pelit, ganteng lagi</span> <br />
</ul>
<script>
document.getElementsByTagName("input")[0].indeterminate = true;
document.getElementsByTagName("input")[1].indeterminate = true;
</script>
</body>
</html>
SHARE