Checkbox arkaplanı değiştirme ?
Checkbok işaretlendiği zaman arkaplanın varsalayılan renk olan mavi değil de kırmızı olmasını istiyorum. Ben bu şekidle bir kod yazarak çalışmasını denedim, olmuyor sanırım. Nasıl halledebilirim. Teşekkür ederim.
<div class="sign-keep">
<input type="checkbox" id="sign" name="sign">
<label for="sign" > OTURUMU AÇIK TUT </label>
</div>
.sign-keep input:checked {
background-color: red;
}
Merhaba
Bu örnek sana yardımcı olabilir:
HTML:
<div class="form-checkbox">
<input type="checkbox" class="form-checkbox-input" id="check">
<label for="check" class="form-checkbox-label">Default</label>
</div>
CSS:
.form-checkbox-input {
display: none;
}
.form-checkbox-input + .form-checkbox-label:before {
content: " ";
width: 14px;
height: 14px;
border: 2px solid #c4c4c4;
display: inline-flex;
border-radius: 4px;
background-size: 12px;
background-position: center;
transition: 0.2s;
margin-right: 5px;
}
.form-checkbox-input:checked + .form-checkbox-label:before {
background-color: red;
border-color: red;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.2.5L3.5 5.2 1.8 3.5a.7.7 0 0 0-1 1L3 6.8c.3.3.7.3 1 0l5.3-5.3a.7.7 0 0 0-1-1z' fill='%23fff'/%3E%3C/svg%3E");
background-repeat: no-repeat;
}
Umarım yardımcı olabilmişimdir.