jquery - make - radio button look like button css




Making radio buttons look like buttons instead (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 */

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 making something like that? Also, keep in mind, it has to work with IE8.

Here's what I have so far, 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;
}

Thank you


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


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.





css