v2.5.2
Giriş yap

Checkbox arkaplanı değiştirme ?

emredemirtas
1,381 defa görüntülendi ve 3 kişi tarafından değerlendirildi
3 4

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;
}
css html
Cevap yaz
Cevaplar (4)
tayfunerbilen
1363 gün önce

Lütfen sorunuzu sorarken kodları doğru şekilde paylaşmaya çalışın, ben şimdilik kodlarınızı düzelttim. Sorunuz için ise şunu deneyebilirsiniz;

.sign-keep input:checked + label {
    background-color: red;
}
0
#003889
arduinoturkbatu
1363 gün önce

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.

0
#003888
venloress
1385 gün önce

Merhaba, 'after - before' ile üstüne yeni bir checkbox yapabilirsin.
Ufak bir örnek veriyorum, bunun üstüne kendin koyup geliştirebilirsin.;


input[type='checkbox'] {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background: red;
}
1
#003676