<h3>::Checked Selector Example 1</h3>
<input id="merah" type="checkbox" /><label class="lb1"> Ubah Warna Background </label>
<input id="word" type="checkbox" /> <label class="lb1"> Ubah Warna Tulisan </label>
<div class="kotak"> MR JUN </div>
<h3>::Checked Selector Example 2</h3>
<input id="merah2" type="checkbox" />
<input id="word2" type="checkbox" />
<div class="kotak kotak2"> MR JUN </div>
<label for="merah2" class="btn btn-hijau">Ubah Warna Background</label>
<label for="word2" class="btn btn-orange">Ubah Warna Tulisan</label>
body{
padding: 20px;
}
h3{
margin-bottom: 15px;
}
input{
margin-bottom: 15px;
}
.kotak {
display: flex;
align-items: center;
justify-content: center;
background: #2c415d;
font-family: Roboto;
height: 150px;
width: 100%;
text-align: center;
color: #fff;
font-size: 30px;
font-weight: bold;
margin-bottom: 25px
}
.kotak2{
margin-bottom:10px;
}
.btn.biru {
background-color: #000;
}
.btn.hijau {
background-color: #23af95;
}
#merah:checked ~ .kotak {
background: #bf4e4e;
}
#word:checked ~ .kotak {
color: #28c7a9;
}
#merah2, #word2 {
display: none;
}
#merah2:checked ~ .kotak2 {
background: #bf4e4e;
}
#word2:checked ~ .kotak2 {
color: #28c7a9;
}
.lb1 {
margin: 0 15px 0 5px;
}
.btn{
display: inline-block;
padding: 10px 15px;
color: #fff;
border-radius: 3px;
margin: 10px 10px 5px 0;
cursor:pointer
}
.btn.btn-hijau{
background-color: #38BB6B;
}
.btn.btn-orange{
background-color: #F87117;
}
HTML
CSS
JS