Автор

04 04.2013
Нестандартные 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

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

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


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

Порой разработчик не особо заморачивается дизайном своего ресурса и приходит к выводу, что будет использовать готовые шаблоны для сайта. Это весьма упрощает жизнь верстальщику, так как приходиться работать с готовым материалом, который уже можно изменить на свое усмотрение не создавая дизайн с нуля. В данном посте мы рассмотрим подборку замечательных, на мой взгляд, готовых шаблонов для сайта, которые вы можете скачать и использовать на свое усмотрение. Уверен, что каждый из посетителей найдет что-нибудь примечательное на свой вкус..

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


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

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


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close