Возможно ли положить изображение в поле ввода = "флажок"?

Ответ 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

Ответ 2

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

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

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

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

Ответ 3

Установите флажок в div и поместите фоновое изображение в указанный div. Вот пример:

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