CODEWITHSUNDEEP
javascripthtml
Steven Lu
Steven Lu

Reputation: 43427

Using Buttons like radio buttons

I'd like to have the user choose between a set of choices, but rather than a list of radio buttons and descriptions i'd like buttons which have the descriptions on the buttons (looks better and less ambiguous). But there would also be preferably some way to know what the group of buttons is "set" to. This is to make it work just like the radio buttons would.

Is there a standard way to do this? I'd like to be able to guarantee that the currently selected option will be easily identifiable (assigning colors manually if I must do it that way).

What I'm not sure about at the moment is if it'll work (on most browsers) if I just try to assign multiple buttons with the same name, like I would do with the radio buttons.

Upvotes: 0

Views: 2621

Answers (2)

RobG
RobG

Reputation: 147363

Visual display is an issue for CSS and HTML. The label can be associated with the radio button by having a box border around both to group them visually. A slight change of background colour will help too. To pack them close together, put the button under the label. It shouldn't take up any more room than a button and you save a slab of script.

Like:

<style type="text/css">
.aButton {
  border: 1px solid #bbbbbb;
  background-color: #eeeeee;
  margin: 1px;
}
</style>


<table>
  <tr>
    <td><label class="aButton" for="b0">Yes<input type="radio" name="group1" id="b0"></label>
        <label class="aButton" for="b1">No<input type="radio" name="group1" id="b1"></label>
        <label class="aButton" for="b2">Maybe<input type="radio" name="group1" id="b2"></label>
</table>

Upvotes: 2

Roland Mai
Roland Mai

Reputation: 31077

Use labels to extend the click area of a radio button.

<label class="radioLabel"><input type="radio" value="0" /> None</label>

Now, style the label to make it look like a button. To give the label other visuals, such as mouseover/inactive/selected, use javascript to add/remove classes to the label and subscribe to mouse events (hover, click etc)

You can hide the radio buttons with CSS, but unless you have images to set as backgrounds for the various states (inactive/selected/mouseover), I wouldn't recommend it.

Upvotes: 3

Related Questions