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

Ответ 1

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

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

НОВЫЙ ПОРЯДОК HTML

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

.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;
}

<ul class="donate-now">
  <li>
    <input type="radio" id="a25" name="amount" />
    <label for="a25">$25</label>
  </li>
  <li>
    <input type="radio" id="a50" name="amount" />
    <label for="a50">$50</label>
  </li>
  <li>
    <input type="radio" id="a75" name="amount" checked="checked" />
    <label for="a75">$75</label>
  </li>
  <li>
    <input type="radio" id="a100" name="amount" />
    <label for="a100">$100</label>
  </li>
  <li>
    <input type="radio" id="other" name="amount" />
    <label for="other">other:</label>
  </li>
  <li>
    <input type="text" id="otherAmount" name="numAmount" />
  </li>
</ul>

Ответ 2

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

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

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

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

Ответ 3

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

Что бы я сделал, было бы создать кнопки с элементом <button> и элементом поля скрытой формы, чтобы запомнить, какой из них "нажат" следующим образом:

<button type="button" id="btn1">Choice 1</button>
<button type="button" id="btn2">Choice 2</button>
<button type="button" id="btn3">Choice 3</button>
<input type="hidden" id="btnValue" value="" />

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

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 или что-то еще), точно так же, как вы обычно сказали бы, какие "button" они нажали.

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

Ответ 4

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

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

Ответ 5

Попробуйте эту простую логику с JQuery.

Html:

<div class="radio-btn-row">
    <div class="radio-btn-wrapper">
        <button id="bt1" class="radio-btn" type="button">Button 1</button>
    </div>
    <div class="radio-btn-wrapper">
        <button id="btn2" class="radio-btn" type="button">Button 2</button>
    </div>
    <div class="radio-btn-wrapper">
        <button id="btn3" class="radio-btn" type="button">Button 3</button>
    </div>
    <div class="radio-btn-wrapper">
        <button id="btn4" class="radio-btn" type="button">Button 4</button>
    </div>
    <!--No matter how many buttons do you want -->
</div>

ЯШ:

    $.each($('.radio-btn'), function (key, value) {
        $(this).click(function (e) {
            $('.radio-btn-selected')
                .removeClass('radio-btn-selected')
                .addClass('radio-btn');

            $(this)
                .removeClass('radio-btn')
                .addClass('radio-btn-selected');

            //do whatever you want on click
        });
    });

CSS:

.radio-btn-row{
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 20px;
}

.radio-btn-wrapper{
  margin: 0px 4px;
}

.radio-btn{
  background-color: #FFFFFF;
  border: 1px solid #4A4A4A;
  color: #4A5362;   
  font-size: 14px;  
  line-height: 26px;    
  outline: none;
}

.radio-btn-selected{
  background-color: #FFFFFF;
  border: 1px solid #55BC7E;
  color: #55BC7E;
  font-size: 14px;  
  line-height: 26px;    
  outline: none;
}