Можно ли поместить изображение в поле ввода type = "check box"?

Question

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

Answer 1

Я нашел способ, как дать изображение флажок & радио кнопка с чистым CSS.

HTML

<input type='checkbox' name='thing' value='valuable' id="thing"/><label for="thing"></label>

CSS

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

input[type=checkbox] + label {
    background: #999;
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;
}

input[type=checkbox]:checked + label {
    background: #0080FF;
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;
}

Проверьте это для более http://css -tricks.com / the-checkbox-hack / ,

https://gist.github.com/592332

Answer 2

Я пишу свой собственный код для решения этой проблемы. Это будет работать так У меня не было этого кода сейчас, но я пишу так же здесь, на SO.

<div class="checkbox-wrapper">
<input type="checkbox" name="value"/>
<img src="img/blah.png"/>
</div>

В css мы уберем этот флажок, сделав его Z-индекс меньше, чем изображение, которое я поместил внутри этого кода оболочки. В конечном итоге, когда кто-то нажимает на изображение, оно выглядит как флажок, и в реальном флажке будет нажата. вместо display:none лучше использовать opacity: 0. Это сломается в IE6, но нас это не волнует, потому что я больше не поддерживаю IE6.

В Javascript Вы можете написать событие, если вы хотите другую (но похожую на мою) реализацию. Вы можете заменить собственный Html Checkbox, Radio и выбрать (лучше выбрать select2, если вы используете загрузчик Twitter) своими собственными элементами управления на основе тем.

Answer 3

Поместите флажок в элемент div и поместите фоновое изображение в элемент div. Вот пример:

<div id="backgrounddiv" style="background-image: url('image.gif');">
<input id="check_box" type="checkbox" />
</div>