Рекомендовать карту

Переключатели-флажки овальной формы на CSS3

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

Демо-пример

Установка на сайт

1. Код в таблице внизу вставить в раздел head или файл стилей сайта:

Для выделения текста сделайте щелчок мышью.
Для увеличения окна, «подцепите» мышью правый нижний угол.


2. А этот код скопируйте и расположите в разделе body в том месте, где желаете видеть переключатель/переключатели:


<input type="checkbox" id="checkbox1" class="oval" checked="checked">
<label class="toggler" for="checkbox1"></label>
<br><br>
<input type="checkbox" id="checkbox2" class="oval" checked="checked">
<label class="toggler red" for="checkbox2"></label>
<br><br>
<input type="checkbox" id="checkbox3" class="oval" checked="checked">
<label class="toggler orange" for="checkbox3"></label>  
<br><br>
<input type="checkbox" id="checkbox4" class="oval" checked="checked">
<label class="toggler yellow" for="checkbox4"></label>
<br><br>
<input type="checkbox" id="checkbox5" class="oval" checked="checked">
<label class="toggler blue" for="checkbox5"></label>

По умолчанию флажки открываются на странице во включенном состоянии. Если есть желание изменить ситуацию до наоборот, просто удалите часть кода checked="checked" из HTML-кода каждого переключателя.

Спасибо за внимание. Посещайте мой сайт. Пока! L.M.



Ваше мнение по материалу, изложенному на сайте




  © 2015–2024  dynamic-site.olerant.ru  L.M. Служба поддержки Яндекс.Метрика