Use div as radio-button

Question

How can I use a div as radio button ?

I mean that :

you can select a div and then it is bordered blue
you can only select one of them

score 42 · Answer 1 · answered Jun 06 '17 at 12:33

If you want a CSS Only solution, this is an excellent one :

.labl {
    display : block;
    width: 400px;
}
.labl > input{ /* HIDE RADIO */
    visibility: hidden; /* Makes input not-clickable */
    position: absolute; /* Remove input from document flow */
}
.labl > input + div{ /* DIV STYLES */
    cursor:pointer;
    border:2px solid transparent;
}
.labl > input:checked + div{ /* (RADIO CHECKED) DIV STYLES */
    background-color: #ffd6bb;
    border: 1px solid #ff6600;
}

<label class="labl">
    <input type="radio" name="radioname" value="one_value" checked="checked"/>
    <div>Small</div>
</label>
<label class="labl">
    <input type="radio" name="radioname" value="another" />
    <div>Small</div>
</label>

Inspired by this answer

`div` inside `label` is not alowed https://stackoverflow.com/questions/18609554/is-div-inside-label-block-correct — Aleksandr Belugin, Aug 08 '20 at 14:23

score 18 · Accepted Answer · edited Jul 15 '18 at 08:05

18

Yes, you can use 'div' as radio button and will work as radio button groups. But for this you'll need Javascript. I've created a script for that using JQuery. Here is the source--

$('.radio-group .radio').click(function(){
    $(this).parent().find('.radio').removeClass('selected');
    $(this).addClass('selected');
    var val = $(this).attr('data-value');
    //alert(val);
    $(this).parent().find('input').val(val);
});

.radio-group{
    position: relative;
}

.radio{
    display:inline-block;
    width:15px;
    height: 15px;
    border-radius: 100%;
    background-color:lightblue;
    border: 2px solid lightblue;
    cursor:pointer;
    margin: 2px 0; 
}

.radio.selected{
    border-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h2>Select an option (You will get it's value displayed in the text input field!)</h2>
<form method="post" action="send.php">
  <div class="radio-group">
      <div class='radio' data-value="One"></div>1
      <div class='radio' data-value="Two"></div>2
      <div class='radio' data-value="Three"></div>3
      <br/>
      <input type="text" id="radio-value" name="radio-value" />
  </div>
  
</form>

edited Jul 15 '18 at 08:05

rakibulmuhajir

61
2
11

answered Oct 04 '15 at 16:19

Xahed Kamal

2,203
1
20
41

Thank you for your fast answer. That was exactly what I wanted – Tom291 Oct 04 '15 at 16:22
but how can I submit the selected number to a php file after clicking on a button? – Tom291 Oct 04 '15 at 18:36
I've just made an edit for that. There is a text box now, where you get the value. You make it type="hidden". So, now you can send the value to PHP by using Form submit like you do! – Xahed Kamal Oct 04 '15 at 18:44
Wow thank you very much. That works perfect for me! :D – Tom291 Oct 04 '15 at 18:51
Nice, but you wil miss some accessability that normaly comes with radio buttons, for example selecting next/previous with arrow keys – Michiel Jan 19 '22 at 08:37
@Michiel, my answer was based on the question. Tom wanted to use DIV. But below there is a CSS solution, if you prefer. – Xahed Kamal Jan 20 '22 at 10:43

score 2 · Answer 3 · answered Oct 04 '15 at 16:19

This is a simple solution.

HTML

<div class="option first">1</div>
<div class="option second">2</div>
<div class="option third">3</div>
<div class="option fourth">4</div>

CSS

.option
{
    background-color:red;
    margin: 10px auto;
}

.option.active
{
    border:1px solid blue;
}

Jquery

$(document).ready(
function()
    {
        $(".option").click(
            function(event)
        {
            $(this).addClass("active").siblings().removeClass("active");
        }
        );
    });

link

Thank you too. I think this is The simplest solution – Tom291 Oct 04 '15 at 16:22 — Tom291, Oct 04 '15 at 16:22

score 0 · Answer 4 · answered May 02 '23 at 18:48

Check this out. Strict HTML/CSS only solution (no divs inside labels):

input {display: none;}
label {display: block;}

input + div  {
  background: orange;
}

input + div label {
  padding: 10px;
  cursor: pointer;
}

input:checked + div {
  background: red;
}

<input type="radio" id="one" name="test" value="ONE">
<div><label for="one">ONE</label></div>

<input type="radio" id="two" name="test" value="TWO">
<div><label for="two">TWO</label></div>

<input type="radio" id="three" name="test" value="THREE">
<div><label for="three">THREE</label></div>

This way uses a label inside a div (as opposed to a div inside a label, which is illegal). You can put any other elements in the div.

If you want the entire div to be clickable as a radio button, its label must cover its full width and height. The easiest solution for all cases is label {position: absolute; width: 100%; height: 100%;} along with input + div {position: relative;}. And place the label last among any other elements inside the div.

Use div as radio-button

4 Answers4

Linked