Создание переключателей вместо кнопок

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

Каков наилучший способ сделать что-то подобное? Кроме того, имейте в виду, он должен работать с IE8.

Вот что я до сих пор, http://jsfiddle.net/YB8UW/

.donate-now { list-style-type:none; margin:25px 0 0 0; padding:0; } .donate-now li { float:left; margin:0 5px 0 0; } .donate-now label { padding:5px; border:1px solid #CCC; cursor:pointer; } .donate-now label:hover { background:#DDD; } 

спасибо

Это можно сделать с помощью CSS и без необходимости использования большой структуры. Я сделал это с помощью флажков и переключателей.

Это работает без добавления нового HTML-кода или приведения любых JS-библиотек. => jsFiddle

НОВЫЙ ЗАКАЗ HTML

  

CSS

 .donate-now { list-style-type:none; margin:25px 0 0 0; padding:0; } .donate-now li { float:left; margin:0 5px 0 0; width:100px; height:40px; position:relative; } .donate-now label, .donate-now input { display:block; position:absolute; top:0; left:0; right:0; bottom:0; } .donate-now input[type="radio"] { opacity:0.01; z-index:100; } .donate-now input[type="radio"]:checked + label, .Checked + label { background:yellow; } .donate-now label { padding:5px; border:1px solid #CCC; cursor:pointer; z-index:90; } .donate-now label:hover { background:#DDD; } направо .donate-now { list-style-type:none; margin:25px 0 0 0; padding:0; } .donate-now li { float:left; margin:0 5px 0 0; width:100px; height:40px; position:relative; } .donate-now label, .donate-now input { display:block; position:absolute; top:0; left:0; right:0; bottom:0; } .donate-now input[type="radio"] { opacity:0.01; z-index:100; } .donate-now input[type="radio"]:checked + label, .Checked + label { background:yellow; } .donate-now label { padding:5px; border:1px solid #CCC; cursor:pointer; z-index:90; } .donate-now label:hover { background:#DDD; } 

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

EDIT: это не решение, если вам нужно поддерживать браузеры IE.


Вы можете использовать свойство внешнего вида CSS:

СМОТРЕТЬ ДЕМО

 -webkit-appearance: button; /* WebKit */ -moz-appearance: button; /* Mozilla */ -o-appearance: button; /* Opera */ -ms-appearance: button; /* Internet Explorer */ appearance: button; /* CSS3 */ 

ИЛИ ЕСЛИ ВЫ ХОТИТЕ СДЕЛАТЬ ЭТО СЕБЯ …

Я бы сделал, чтобы создать кнопки с элементом элементом поля скрытой формы, чтобы запомнить, какой из них «нажат» следующим образом:

     

Вы увидите, что кнопка «нажата» или «нажата» нажата, поэтому вам по умолчанию понадобится следующее:

 button { border-width: 2px; border-style: outset; border-color: /*Insert a darker version of your button color here*/ } 

Затем в jQuery (если вы можете сделать это в jQuery, вы можете сделать это прямо на JavaScript, поэтому имейте это в виду, если вы не хотите использовать jQuery):

 $("#btn1").click(function () { $(this).css("border-style", "inset") $("#btn2").css("border-style", "outset;"); $("#btn3").css("border-style", "outset;"); $("btnValue").val("btn1IsPressed"); }); $("#btn2").click(function () { $(this).css("border-style", "inset") $("#btn1").css("border-style", "outset;"); $("#btn3").css("border-style", "outset;"); $("btnValue").val("btn2IsPressed"); }); $("#btn3").click(function () { $(this).css("border-style", "inset") $("#btn1").css("border-style", "outset;"); $("#btn2").css("border-style", "outset;"); $("btnValue").val("btn3IsPressed"); }); 

Теперь все, что вам нужно сделать, это запросить значение из #btnValue после POST (или GET или что-то еще), точно так же, как вы обычно сказали бы, какую кнопку «они» нажали.

Имейте в виду, что вам нужно будет добавить немного больше функциональности, чтобы «убирать» кнопки, но я думаю, вы понимаете. Все, что вам нужно сделать, это прочитать значение #btnValue при щелчке и вместе с другими вашими утверждениями использовать ветку if для обработки, если она уже нажата или нет, и соответственно переключить границы (не забудьте очистить ( "" ) значение #btnValue на« нажатие »кнопки, чтобы вы могли определить, оставили ли они их все без нажатия или нет).

К сожалению, вы не можете настраивать радиокнопки непосредственно в любом браузере. Способ сделать это – использовать элементы с соответствующим набором атрибутов, а затем спрятать сам переключатель, используя visibility: hidden а не display: none . Затем вы можете размещать метки везде, где хотите, и они будут действовать как переключатели. Вам понадобится немного javascript для управления стилей этикеток на основе состояния элемента потому что IE8 не будет поддерживать расширенные псевдоclassы CSS, такие как :checked .

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