Замена элемента флажка значками

Question

Я хочу настроить флажок браузера. Когда статус проверен, значок checked.svg должен отображаться вместо флажка, а значок unchecked.svg в противном случае.

Вот мой код. HTML:

<div class="checkbox-custom">
   <input type="checkbox"/>
      <div class="checkmark">
          <img src="@/assets/images/icons/checkbox/unchecked.svg" class="unchecked"/>
          <img src="@/assets/images/icons/checkbox/checked.svg" class="checked"/>
    </div>
</div>

SASS:

.checkbox-custom {
    position: absolute;
    width: 28px;
    height: 28px;
    left: 0;
    top: 0;

    // Hide default browser checkbox
    input[type=checkbox] {
                display: none;
            }

   input[type=checkbox] + .checkmark {
        position: absolute;
        left: 3.5px;
        top: 3.5px;
        right: 3.5px;
        bottom: 3.5px;

        display: inline-block;
        cursor: pointer;

        img {
            width: 21px;
            height: 21px;
        }

        .checked {
            display: none;
        }
    }    

    input[type=checkbox]:checked + .checkmark {
        .checked {
            display: block;
        }

        .unchecked {
            display: none;
        }
    }
 }

Когда я нажимаю на флажок, ничего не происходит. В чем может быть ошибка?

Answer 1

Это может быть выполнено без javascript. Щелчок по элементу метки переключает флажок внутри него, так что с некоторым умным css мы можем изменить отображение на основе проверенного состояния входа.

input[type=checkbox] {
  display: none;
}
.label {
  border: 1px solid #000;
  display: inline-block;
  padding: 3px;
  /* background: url("unchecked.png") no-repeat left center; */ 
  /* padding-left: 15px; */
}
input[type=checkbox]:checked + .label {
  background: #f00;
  color: #fff;
  /* background-image: url("checked.png"); */
}

<label><input type="checkbox"><span class="label">Check me</span></label>

Измените стили .label для использования фонового изображения по вашему выбору (и расположите его слева от текста).

Answer 2

http://jsfiddle.net/pKM3x/

CSS:

.checkbox{
    width: 23px;
    height: 21px;
     background: transparent url(http://i.stack.imgur.com/S4p2R.png ) no-repeat 0 50%
}
.checked{
    background: transparent url(http://i.stack.imgur.com/S4p2R.png ) no-repeat 80% 50%
}

HTML:

<div class="checkbox">
</div>

JQUERY:

$(".checkbox").click(function(){
    $(this).toggleClass('checked')
});

Это также можно сделать с чистым JS.