Use a radio button as normal button

Question

i am trying to make a radio button behave like button

here is my html

<div class="options">
<label><span class="label">options</span>
 <abbr class="required" title="required">*</abbr>
 </label>
<ul>
    <li>
<input type="radio" value="option1" checked="checked" name="radio_option1" id="option1" class="checkout_field"> optionA
    </li>

    <li>
<input type="radio" value="option2" name="radio_option1" id="option2" class="checkout_field"> OptionB
   </li>

   <li>
<input type="radio" value="option3" name="radio_option1" id="option3" class="checkout_field"> OptionC

  </li>
</ul>
</div>

and the css

.options ul {
    list-style-type:none;
    margin:25px 0 0 0;
    padding:0;
}

.options li {
    float:left;
    margin:0 5px 0 0;
}

.options li {
    padding:5px;
    cursor:pointer;
    -webkit-appearance: button;
    /* WebKit */
    -moz-appearance: button;
    /* Mozilla */
    -o-appearance: button;
    /* Opera */
    -ms-appearance: button;
    /* Internet Explorer */
    appearance: button;
    /* CSS3 */
}

input[type=radio] {
    display:none
}

if i set the display of the input to "in-line" its works but with display property set to "none" it does-not work.

please note that i cannot change the html markup above as its being generated somewhere else.

here is the codepen link for the same https://codepen.io/anon/pen/XRbQJO

two reasons: 1. that way the actual radio button is seen i want that to be hidden. 2. you have to click the exact radio button to be able to select i want the whole button to be clickable — stackedup, Apr 17 '17 at 15:06
What is actually going to happen after the radio being checked? — Stickers, Apr 17 '17 at 15:08
Did you try searching? http://stackoverflow.com/questions/16242980/making-radio-buttons-look-like-buttons-instead — Waxi, Apr 17 '17 at 15:12

score 1 · Accepted Answer · answered Apr 17 '17 at 15:12

1

You could try this:

$('.options li').click(function() {
  $(this).find('input[type="radio"]').prop('checked', true);
});

pen

answered Apr 17 '17 at 15:12

Stickers

75,527
23
147
186

score 1 · Answer 2 · answered Apr 17 '17 at 15:13

You can do this by adding a bit of jQuery to handle the click of the radios surrounding <li>s.

$(':radio').parent('li').on('click', function() {
  $(this).find(':radio').prop('checked', 'checked');
  alert($(':radio:checked').attr('id'));
});

Updated Codepen

score 0 · Answer 3 · answered Apr 17 '17 at 15:20

0

This may be useful

    input[type="radio"] {
      opacity:0;
      width:100%;
      position:absolute;
    }

answered Apr 17 '17 at 15:20

Jonada Ferracaku

135
1
2
11

nice solution but user will have to click with real precision. – stackedup Apr 17 '17 at 15:24

Use a radio button as normal button

3 Answers3