Making radio buttons look like buttons instead

Question

I would like to have a set of radio buttons for a donation form, however I want them to look like buttons instead of the circle dials.

What is the best approach to m

Answer 1

Try this simple logic with 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>

js:

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

Answer 2

It can be done with CSS and without the need of a large framework. I have done this with checkboxes and radio buttons.

This works without adding new HTML, or bringing in any JS libraries. => jsFiddle

THE NEW ORDER OF THE HTML

This is the ten minute hacky version, you can clean it up even further, but it shows a good example of how simple it is.

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

Answer 3

EDIT: this isn't a solution if you need to support IE browsers.

---

You could use CSS appearance property:

SEE DEMO

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

Answer 4

Unfortunately you can't style radio buttons directly in any browser. The way to do it is to use <label> elements with properly set for attributes, then hide the radio button itself using visibility: hidden rather than display: none. You can then position the labels wherever you want and they will act as radio buttons. You will need a bit of javascript to control the styling of the labels based on the state of the <input> element because IE8 won't support advanced CSS pseudoclasses like :checked.

It's a bit of a hack but it is the only way to use native radio buttons with custom graphics and still preserve accessibility.

Answer 5

OR IF YOU WANT TO DO THIS YOURSELF...

What I would do would be to create the buttons with the <button> element and a hidden form field element to remember which one is "pressed" like so:

<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="" />

You will CSS to show that the button is "pressed down" or not "pressed down" so you would need them by default to be something like this:

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

Then in jQuery (if you can do it in jQuery, you can do it in straight JavaScript, so keep that in mind if you don't want to use 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");
});

Now all you need to do is request the value from #btnValue after POST (or GET or whatever), just like you normally would to tell which "button" they had pressed.

Be advised you will need to add a little more functionality to "unpress" the buttons, but I think you get the point. All you would need to do is read the value of #btnValue on click and, along with your other statements,use an if branch to handle whether it is already pressed or not and switch the borders accordingly (don't forget to clear ("") the value of #btnValue on the "unpressing" of a button so you can tell whether they left them all unpressed or not).