Флажки и радио кнопки

Question

Я хочу использовать изображение для непроверенного флажка и другое изображение для проверенного флажка. Я не хочу добавлять ярлыки, классы или что-то подобное. Я хочу оставить HTML в покое, просто отображать <input type="checkbox" /> Я не против использовать JavaScript или jQuery, если я могу оставить HTML в покое. Это пример того, что я ищу, но он работает только в браузерах Webkit. http://jsfiddle.net/7kScn/ Без добавления меток, классов или идентификаторов, будет ли решение для этого?

Answer 1

это может помочь перейти на Jquery UI

Флажок напр. http://jqueryui.com/button/#checkbox

Радио например. http://jqueryui.com/button/#radio

gl hf

Answer 2

Забавный вызов в пятницу, вот моя несколько хакерская реализация.Имейте в виду, что для реального приложения вам необходимо включить более точный таргетинг на тип ввода и более надежные селекторы:

JSFiddle: http://jsfiddle.net/2RNVh/

$("input").each(function() {
    var $this = $(this);
    $this.hide();

    var $image = $("<img src='http://refundfx.com.au/uploads/image/checkbox_empty.png' />").insertAfter(this);    

    $image.bind("click", function() {
        var $checkbox = $(this).prev("input");
        $checkbox.prop("checked", !$checkbox.prop("checked"));    
        checkImage();
    })

    function checkImage() {
        if($image.prev("input").prop("checked")) {
            $image.attr("src", "http://refundfx.com.au/uploads/image/checkbox_full.png");
        } else {
            $image.attr("src", "http://refundfx.com.au/uploads/image/checkbox_empty.png");
        }
    }

});

Answer 3

К сожалению, я, должно быть, не совсем ясно, да, есть очень гибкие и приятные вещи, которые вы можете сделать с помощью jQuery, CSS (X) HTML и чего угодно еще ... но по сути, они конвертируют input в div. Также было сложно найти что-то хорошее для выпадающих меню. Я закончил тем, что нашел это для блоков выбора, и я собираюсь попытаться выяснить, могу ли я сделать что-то подобное для флажков и переключателей. http://bavotasan.com/2011/style-select-box-using-only-css/

Я только что нашел что-то идеальное. http://acidmartin.wordpress.com/2011/06/23/imageless-css-3-custom-checkboxes-and-radio-buttons/ Хотя цвета и шрифт довольно некрасивые, они выполняют то, что мне было нужно, плюс их легко изменить.

Answer 4

это выглядит как интересный вариант, хотя, похоже, только в бета-версии:

http://widowmaker.kiev.ua/checkbox/