Loading





Форекс с Альпари

eTXT




Анкетка


Чекбоксы и радиокнопки на CSS

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.


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

Демо-пример

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

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

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


В CSS Вы можете изменить некоторые параметры по своему усмотрению.

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


<input type="checkbox" id="checkbox1" class="css3checkbox">
<label class="toggler" for="checkbox1">Чекбокс 1</label>

<input type="checkbox" id="checkbox2" class="css3checkbox">
<label class="toggler" for="checkbox2">Чекбокс 2</label>

<input type="radio" id="radio1" name="myradios" class="css3radio">
<label class="toggler_r" for="radio1">Радиокнопка №1</label>

<input type="radio" id="radio2" name="myradios" class="css3radio">
<label class="toggler_r" for="radio2">Радиокнопка №2</label>

<input type="radio" id="radio3" name="myradios" class="css3radio">
<label class="toggler_r" for="radio3">Радиокнопка №3</label>


Радиокнопка (от англ. radio button), или переключатель, — элемент интерфейса, который позволяет пользователю выбрать одну опцию (пункт) из предопределенного набора (группы).


Флаговая кнопка, чекбокс (от англ. check box), галочка — элемент графического пользовательского интерфейса, позволяющий пользователю управлять параметром с двумя состояниями — «включено» и «выключено». Во включённом состоянии внутри чекбокса отображается отметка (галочка (✓), или реже крестик(×)).

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


Работа в интернете с текстами




Ваш комментарий







  © 2015–2018  https://leonidmuzyka.com/  L.M. Служба поддержки RSS подписка подписка