Автор

Нестандартные Checkbox (RadioButton) без использования JavaScript

Нестандартные Checkbox (RadioButton) без использования JavaScript


 

К данному решению пришел не сразу, способ реализации был третьим по счёту, как мне кажется, вполне достойным внимания.

Основная фишка в том, что для реализации вообще не используется JavaScript.

Внимание! Метод не работает в IE8 и ниже, в нашем проекте решили не ориентироваться на эти браузеры, по крайней мере на этапе Бета.

Начнём

Есть картинка, которую необходимо прикрутить на checkbox’ы.

Размер в данном случае играет не последнее значение, потому что все стили будут изменяться исходя из размеров картинки.

Стиль контейнера для элемента с Checkbox с выстраиванием в строчку этих элементов. Стоит обратить внимание на height, высота контейнера должна учитывать особенности картинки, при большем чем нужно значении, будет видно оба элемента картинки, а при меньшем значении, элементы могут обрезаться.

.check-element {
width: 56px;
height: 28px;
padding-top: 5px;
}

Скрываем браузерный checkbox:

.checkbox {
display: none;
}

Стили для label, в котором и лежит картинка:

.check-label {
cursor: pointer;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 68px;
background: url('/img/checkbox-sprite.png') no-repeat 0px 0px;
vertical-align: middle;
}

.checkbox:checked + .check-label {
color: #25c3ff;
text-shadow: 0px 1px 5px #25c3ff;
background: url('/img/checkbox-sprite.png') no-repeat 0 -28px;
}

 

Checkbox

Код для вывода элемента:

<p class="check-element">
    <input type="checkbox" class="checkbox" id="my-checkbox1" name="check" />
    <label class="check-label" for="my-checkbox1">Check1</label>
</p>

<p class="check-element">
    <input type="checkbox" class="checkbox" id="my-checkbox2" name="check" />
    <label class="check-label" for="my-checkbox2">Check2</label>
</p>

<p class="check-element">
    <input type="checkbox" class="checkbox" id="my-checkbox3" name="check" />
    <label class="check-label" for="my-checkbox3">Check3</label>
</p>

 

Пример:

Вместе с нестандартными Checkbox решилась и ещё одна задача, смена цвета текста при выборе нужного элемента (также встречал решение данного вопроса с помощью больших и страшных JavaScript)

RadioButton

Данное решение также работает и для RadioButton.

Код для вывода элемента:

<p class="check-element">
    <input type="radio" class="checkbox" id="my-checkbox4" name="check" />
    <label class="check-label" for="my-checkbox4">Check4</label>
</p>

<p class="check-element">
    <input type="radio" class="checkbox" id="my-checkbox5" name="check" />
    <label class="check-label" for="my-checkbox5">Check5</label>
</p>

<p class="check-element">
    <input type="radio" class="checkbox" id="my-checkbox6" name="check" />
    <label class="check-label" for="my-checkbox6">Check6</label>
</p>

 

Пример:

Так как я занимаюсь разработкой сайтов на UMI.CMS, хочу сразу привести примеры для файлов выводящих нестандартные Checkbox и RadioButton:

Checkbox

В файле /tpls/data/reflection/webforms.tpl (либо ваш шаблон вывода формы)

$FORMS['reflection_field_boolean'] = <<<END

    <tr>
        <td style="width:100%;">        
<h7 style="width:100%;" class="check-element">
    <input type="hidden" id="%input_name%" name="%input_name%" value="%value%" />
    <input onclick="javascript:document.getElementById('%input_name%').value = this.checked;" type="checkbox" class="checkbox" id="my-checkboxНестандартные Checkbox (RadioButton) без использования JavaScript" %checked% name="check" />
    <label class="check-label" for="my-checkboxНестандартные Checkbox (RadioButton) без использования JavaScript">Нестандартные Checkbox (RadioButton) без использования JavaScript</label>
</h7>    
        </td>
    </tr>

END;

 

RadioButton

В файле /tpls/vote/default.tpl (либо ваш шаблон вывода формы)

$FORMS['vote_block_line'] = <<<END
    <p>
        <input type="radio" name="vote_results" value="%item_id%" class="search" id="vote_item_%item_id%">
        <span umi:object-id="0" umi:field-name="name">%item_name%</span>
    </p>
END;

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеCSS3

Нестандартные Checkbox (RadioButton) без использования JavaScript

В последнее время чаще встречаются 3d эффекты на сайте, это не удивительно, ведь это позволяет создать иллюзию объемности на ресурсе, при этом это положительно сказывается на посетителях, ведь уникальный пользователь всегда рад чему-то новенькому и интересному, которое можно потрогать самому и посмотреть это в действии. В данном уроке мы рассмотрим как создать эффект переворота изображений, как в книжке, для слайдера изображений и не только. Так как практически все браузеры поддерживают трансформации, то данный эффект станет отличным дополнением..


Нестандартные Checkbox (RadioButton) без использования JavaScript

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


Нестандартные Checkbox (RadioButton) без использования JavaScript

Длинные тени — это последний тренд в веб-дизайне. Этот стиль на сегодняшний день стремительно набирает популярность. Итак. К вашему вниманию CSS3 генератор длинных теней. Он имеет возможность создавать стиль как для текста, так и для изображения. С помощью ползунков можно подстроить длину и рассеивания тени по своему усмотрению, а так же настроить цвета.


Нестандартные Checkbox (RadioButton) без использования JavaScript

Это наверое самый интересный проект на сегодняшний день. Сайт создавался в двух версиях: английской и русской. Использовался американский хостинг, так как сайт рассчитан в первую очередь на американских клиентов и английская версия основная!


75 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close