Использование фонового изображения для флажка

Question

Я пытаюсь установить некоторые флажки, чтобы, когда они не были отмечены, они используют одно изображение, которое у меня есть, а затем при проверке они использовали другое изображение. Вот мои текущие флажки:

<input type="checkbox" name="fordCheckBox" value="Ford"> 

Я также использую следующий CSS, чтобы установить фоновое изображение для каждого флажка.

input[type=checkbox][name=fordCheckBox] { 
     background:url("https://pbs.twimg.com/profile_images/550291079719698432/LbybHjIh.jpeg") no-repeat; 
     height: 25px; 
     width: 25px; 
     background-size: 50%; 
    } 

    input[type=checkbox][name=fordCheckBox]:checked { 
     background:url("http://contentservice.mc.reyrey.net/image_v1.0.0/2267461") no-repeat; 
     height: 25px; 
     width: 25px; 
     background-size: 50%; 
    } 

Как вы можете видеть в моих JSFiddle example значках правильного размера, но он никогда не устанавливая фоновое изображение, как это должно быть. Какие-либо предложения?

Answer 1

Вы можете просто сделать это с ярлыком

input[type=checkbox] { 
    display:none; 
} 

input[type=checkbox] + label { 
    display:inline-block; 
    padding: 0 0 0 0px; 
    background:url("https://pbs.twimg.com/profile_images/550291079719698432/LbybHjIh.jpeg") no-repeat; 
    height: 125px; 
    width: 125px;; 
    background-size: 50%; 
} 

input[type=checkbox]:checked + label { 
    background:url("http://contentservice.mc.reyrey.net/image_v1.0.0/2267461") no-repeat; 
    height: 125px; 
    width: 125px; 
    display:inline-block; 
    background-size: 50%; 
} 

Html

<input type="checkbox" name="fordCheckBox" id="Ford" value="Ford"> 
<label for="Ford"></label> 

Пожалуйста, проверьте ваш обновленный файл jsfiddle https://jsfiddle.net/malithmcr/vbwgweso/

Answer 2

Вы не должны на самом деле пытаться изменить флажок непосредственно; некоторые браузеры всегда будут показывать флажок по умолчанию. Обычно это делается путем добавления метки для флажка, связанного с полем ввода входов. Например:

<input type='checkbox' id='x' name='fordCheckBox'> 
<label for='x'></label> 

Затем вы установите флажок display: none и фактический CSS будет применяться к метке вместо этого. Ваш селекторы должен выглядеть следующим образом: input[type=checkbox]:checked + label

Я нашел эту статью, которая поможет объяснить все и вас через его шаг за шагом:

http://webdesign.tutsplus.com/tutorials/quick-tip-easy-css3-checkboxes-and-radio-buttons--webdesign-8953