Как создать собственные чекбоксы в HTML с помощью CSS и jQuery

Если попытаться стилизовать чекбоксы напрямую, используя CSS-свойства, такие как background или border, это не приведет к желаемому результату, поскольку большинство элементов формы являются встроенной частью браузеров и не поддерживают большую часть визуального форматирования. Поэтому нам нужно найти другой способ стилизации чекбоксов.

В этом руководстве мы создадим настраиваемые чекбоксы, которые будут отображаться одинаково во всех браузерах с помощью CSS и небольшого количества jQuery. Для настройки чекбоксов доступно множество подключаемых модулей jQuery, но они слишком сложны и их не так легко интегрировать.

Это решение даст вам полный контроль над стилизацией и позиционированием чекбоксов, и его очень легко реализовать в любом проекте. Кроме того, он хорошо совместим со всеми браузерами и без проблем работает даже в более старой версии Internet Explorer, такой как IE7.

HTML-код

Создим чекбоксы, установив для атрибута type значение checkbox в элементе <input> и поместив его в свой HTML-код. Теперь добавим атрибут name к элементам с правильным значением, потому что это решение напрямую зависит от этого атрибута.

<form action="action.php" method="post">
    <h3>Choose Your Favorite Sports</h3>
    <label><input type="checkbox" name="sport[]" checked="checked" value="football"> Football</label>
    <label><input type="checkbox" name="sport[]" value="cricket"> Cricket</label>
    <label><input type="checkbox" name="sport[]" value="baseball"> Baseball</label>
    <label><input type="checkbox" name="sport[]" value="tennis"> Tennis</label>
    <label><input type="checkbox" name="sport[]" value="basketball"> Basketball</label>
</form>

Примеры изображений

Для простоты мы использовали отдельные изображения, чтобы указать различные состояния чекбоксов, но рекомендуется объединить все эти изображения в спрайт изображений перед использованием этого решения в реальном проекте для повышения производительности и минимизации HTTP-запросов.

CSS-код

С помощью CSS мы пытаемся скрыть чекбоксы по умолчанию с помощью CSS-свойства opacity и отобразим вместо них настраиваемые чекбоксы.

Теперь поместите следующие стили в заголовок вашего HTML-документа.

<style>
    .custom-checkbox{
        width: 16px;
        height: 16px;
        display: inline-block;
        position: relative;
        z-index: 1;
        top: 3px;
        background: url("checkbox.png") no-repeat;
    }
    .custom-checkbox:hover{
        background: url("checkbox-hover.png") no-repeat;
    }
    .custom-checkbox.selected{
        background: url("checkbox-selected.png") no-repeat;
    }
    .custom-checkbox input[type="checkbox"]{
        margin: 0;
        position: absolute;
        z-index: 2;            
        cursor: pointer;
        outline: none;
        opacity: 0;
        /* CSS-хаки для добавления непрозрачности в старых браузерах */
        _noFocusLine: expression(this.hideFocus=true); 
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        -khtml-opacity: 0;
        -moz-opacity: 0;
    }
</style>

Вы можете подумать, что мы нигде не использовали эти классы в HTML-коде; на самом деле эти классы будут добавлены в DOM jQuery во время выполнения.

jQuery-код

When you call the customCheckbox() function it will wrap the <input> element with a <span> element и apply the .custom-checkbox class on it. Once the .custom-checkbox class is applied to the <span> element CSS will hide the default checkbox и show the image of custom checkbox in place of them. Don’t forget to include the jQuery file in your document before this script. We have called the customCheckbox() function when DOM is fully loaded.

Когда вы вызываете функцию customCheckbox(), она оборачивает элемент <input> элементом <span> и применяет к нему класс .custom-checkbox. После применения класса .custom-checkbox к элементу CSS скроет чекбокс по умолчанию и покажет изображение настраиваемого чекбокса вместо него. Не забудьте включить jQuery в свой документ перед этим скриптом. Мы вызвали функцию customCheckbox(), когда DOM полностью загружен.

<script>
    function customCheckbox(checkboxName){
        var checkBox = $('input[name="'+ checkboxName +'"]');
        $(checkBox).each(function(){
            $(this).wrap( "<span class='custom-checkbox'></span>" );
            if($(this).is(':checked')){
                $(this).parent().addClass("selected");
            }
        });
        $(checkBox).click(function(){
            $(this).parent().toggleClass("selected");
        });
    }
    $(document).ready(function (){
        customCheckbox("sport[]");
    })
</script>