Benjamin Brooks Benjamin Brooks - 10 months ago 22
CSS Question

Radio buttons not working

My radio buttons are not working. They are not clickable...

Below you find the javascript coding, and below that the CSS styling.



input[type=radio], input[type=checkbox] {
display:none;
}

input[type=radio] + label, input[type=checkbox] + label {
display:inline-block;
margin:-2px;
padding: 4px 12px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
color: #333;
text-align: center;
text-shadow: 0 1px 1px rgba(255,255,255,0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
background-image: -o-linear-gradient(top,#fff,#e6e6e6);
background-image: linear-gradient(to bottom,#fff,#e6e6e6);
background-repeat: repeat-x;
border: 1px solid #ccc;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
border-bottom-color: #b3b3b3;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
}

input[type=radio]:checked + label, input[type=checkbox]:checked + label{
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
background-color:#e0e0e0;
}

<div id="option">

<input type="radio" id="all" name="datesize" value="731" checked="checked"><label for="all">all</label>
<input type="radio" id="year" name="datesize" value="365"><label for="all">year</label>
<input type="radio" id="season" name="datesize" value="91"><label for="all">quarter</label>
<input type="radio" id="month" name="datesize" value="30"><label for="all">month</label>
<div id="chooseall"></div>
<div id="chooseyear" style="visibility:hidden">
<input type="radio" id="yearpick0" name="yearpick" value="0" checked="checked"> 2011
<input type="radio" id="yearpick1" name="yearpick" value="1"> 2012
</div>
<div id="chooseseason" style="visibility:hidden">
<input type="radio" id="quarterpick0" name="quarterpick" value="0" checked="checked"> jan-mar
<input type="radio" id="quarterpick1" name="quarterpick" value="1"> apr-jun
<input type="radio" id="quarterpick2" name="quarterpick" value="2"> jul-sep
<input type="radio" id="quarterpick3" name="quarterpick" value="3"> oct-dec
</div>
<div id="choosemonth" style="visibility:hidden">
<input type="radio" id="monthpick0" name="monthpick" value="0" checked="checked"> jan
<input type="radio" id="monthpick1" name="monthpick" value="1"> feb
<input type="radio" id="monthpick2" name="monthpick" value="2"> mar
<input type="radio" id="monthpick3" name="monthpick" value="3"> apr
<input type="radio" id="monthpick4" name="monthpick" value="0"> may
<input type="radio" id="monthpick5" name="monthpick" value="1"> jun
<input type="radio" id="monthpick6" name="monthpick" value="2"> jul
<input type="radio" id="monthpick7" name="monthpick" value="3"> aug
<input type="radio" id="monthpick8" name="monthpick" value="0"> sep
<input type="radio" id="monthpick9" name="monthpick" value="1"> oct
<input type="radio" id="monthpick10" name="monthpick" value="10"> nov
<input type="radio" id="monthpick11" name="monthpick" value="11"> dec
</div>

</div>





Please have a look at the code and see if you know what the problem is. Thnx!

Answer

Your label's are all mapped to the wrong id, change that to:

<input type="radio" id="all" name="datesize" value="731" checked="checked"><label for="all">all</label>
<input type="radio" id="year" name="datesize" value="365"><label for="year">year</label>
<input type="radio" id="season" name="datesize" value="91"><label for="season">quarter</label>
<input type="radio" id="month" name="datesize" value="30"><label for="month">month</label>

Also if your inputs are display: none, please check if it works cross browser, seem to work for me in chrome.

Also the input data wont be send as part of a form if you hide it using display none, better to visually hide it if you need this.

Here is the working fiddle: https://jsfiddle.net/kg7b8gb5/