HTML Use a button as 'radio button' and apply different state on press

Question

so im looking for a solution to use some buttons as 'radio buttons' within a form, imagine you click (only one at once may be pressed) one of the buttons below, it gets a new css tag, maybe background colour or something so you know you have clicked it, and also becomes tagged within a form as selected.

Basically i have a page made up of lots of the below, and its essentially a form, but i need to use buttons as 'multi choice' and also set a state that activates when you click a button, and remains throughout the page.

open to javascript obviously as i think thats what ill need.

https://www.google.com/search?q=custom+radio+buttons should give you more than enough possible ways to approach this. — CBroe, Mar 24 '17 at 15:24
you can use a hidden field for the radio input and select the appropriate value based on which button is clicked. you will use the click event on the buttons to do this... you can also style the radio buttons to look as normal buttons (not sure but you might have to do it through the shadow dom).. etc.. .there are many ways to do it.. — Spluf, Mar 24 '17 at 15:28
Possible duplicate of [Making radio buttons look like buttons instead](http://stackoverflow.com/questions/16242980/making-radio-buttons-look-like-buttons-instead) — jcaron, Mar 24 '17 at 15:31

Ruhul Amin · Answer 1 · 2017-03-24T15:56:04.150

3

You can do with only html and css:

.input-radio{
  display: inline-block;
  margin-right: 10px;
  margin-top: 30px;
}
input[type=radio] {
    display: none;
  }
  input[type=radio] + label {
    padding: 20px;
    border-radius: 40px;
    border: 1px solid #ddd;
 
  }
 input[type=radio] + label:hover {
    border: 1px solid red;
  }
  input[type=radio]:checked + label {
    border: 1px solid red;
  }

<div class="input-radio"><input type="radio" id="male" name="gender" value="male" checked> <label for="male">male</label></div>
<div class="input-radio"><input type="radio" id="female" name="gender" value="female"> <label for="female">Icecrea</label></div>
<div class="input-radio"><input type="radio" name="gender" id="other" value="other"> <label for="other">Vanilla</label></div>

edited Mar 24 '17 at 15:56

answered Mar 24 '17 at 15:32

Ruhul Amin

1,751
15
18

I like this! Could you address the hover state from here also, maybe as simple as input[type=radio]:hover ? – Kieronboz Mar 24 '17 at 15:50
Just add ` input[type=radio] + label:hover { border: 1px solid red; }` answer updated. @Kieronboz – Ruhul Amin Mar 24 '17 at 15:56
Working great my friend! I have one more question if thats ok! the page will be made up of lots of questions each with their own 3 buttons, say like; 1) [a] [b] [c] 2) [a] [b] [c] I need To stop question 2 wiping the click on question 1 – Kieronboz Mar 24 '17 at 16:16

score 1 · Answer 2 · answered Mar 24 '17 at 15:30

Can you control the selection effect with jQuery? Perhaps you can wrap a div around the buttons like this:

<div class="button-div">
    <a class="btn-1">Learn More</a>
    <a class="btn-2">I want this</a>
    <a class="btn-3">No thanks</a>
</div>

Then have an onclick function something like this?

$('.button-div a').on('click', function(){
    var getButton = $(this).attr('class');
    $('.button-div a').removeClass('active');
    $('.button-div a.' + getButton).addClass('active');
}

Then just have a style on the active class

.button-div .active {
    background: red;
}

Only rough but hopefully helps?

HTML Use a button as 'radio button' and apply different state on press

2 Answers2