How do I make a table items a radio button? - css

Question

How do I make the each block of this image act as a radio button?
<table class="table table-bordered">
<tbody>
<tr class="category-item">
<td>
<input id="input-1" type="radio" name="list" value="" />
<label for="input-1">IT Solutions</label>
</td>
<td>
<input id="input-1" type="radio" name="list" value="" />
<label for="input-1">Household</label>
</td>
<td>
<input id="input-1" type="radio" name="list" value="" />
<label for="input-1">Design & Multimedia</label>
</td>
</tr>
<tr class="category-item">
<td>
<input id="input-1" type="radio" name="list" value="" />
<label for="input-1">Event & photography</label>
</td>
<td>
<input id="input-1" type="radio" name="list" value="" />
<label for="input-1">Sales & Marketing</label>
</td>
<td>
<input id="input-1" type="radio" name="list" value="" />
<label for="input-1">Engineering & Architecture</label>
</td>
</tr>
<tr class="category-item">
<td>
<input id="input-1" type="radio" name="list" value="" />
<label for="input-1">Writing & Translation</label>
</td>
<td>
<input id="input-1" type="radio" name="list" value="" />
<label for="input-1">Finance & Accounting</label>
</td>
<td>
<input id="input-1" type="radio" name="list" value="" />
<label for="input-1">Legal</label>
</td>
</tr>
</tbody>
</table>
I've tried this but it only alows to select one table row as a radio button.
.category-item input{
display: none;
}
.category-item label{
cursor: pointer;
padding: 30px;
}
How to make each td act as a radio button the tr tag separates the block so all the elements are not radio button.

Answer 1

you must use unique id for inputs or dont use id and set input in label like this
<label><input type="radio" name="list" value="" /> Label Title</label>
Here is a CodePen, hope this helps.

Answer 2

The mistake you did that you are using the same id for all inputs and this is totally wrong, because ids are always unique which means that no more than one element will take the same id.
then how you are going to determine which radio is checked right now since you are hiding the radio?
For this you could use Pseudo Element :checked to style the checked radio, e.g. you could change the background color for the checked radio.
Here is a JSfiddle, hope this helps.

Answer 3

Say thanks to : zer00ne on My Post
/* Radio Buttons & Labels */
/* :checked & for='ID OF RADIO' */
.rad {
display: none
}
.lab {
border-radius: 9px;
border: 2px inset grey;
padding: 3px 5px;
font-size: 24px;
cursor: pointer;
margin: 20px 10px;
}
.lab::before {
content: 'WHITE';
}
.rad:checked+.lab {
background: red;
color: white;
}
.rad:checked+.lab::before {
content: '\a0\a0RED\a0\a0';
}
/* Anchor & Any Element */
/* href='#ID OF ELEMENT' & #ANY:target */
a {
display: inline-block;
margin: 0 5px;
color: yellow;
background: #000;
padding: 2px 4px;
}
a:first-of-type {
color: #ff4c4c
}
a:nth-of-type {
color: yellow
}
a:last-of-type {
color: lime
}
b {
display: block;
height: 48px;
width: 48px;
border-radius: 50%;
margin: 5px auto;
border: 3px outset grey;
background: rgba(0, 0, 0, .2)
}
#T1:target {
background: red;
}
#T2:target {
background: yellow
}
#T3:target {
background: green
}
<input id='R1' class='rad' name='rad' type='radio'>
<label id='L1' class='lab' for='R1'></label>
<input id='R2' class='rad' name='rad' type='radio'>
<label id='L2' class='lab' for='R2'></label>
<input id='R3' class='rad' name='rad' type='radio'>
<label id='L3' class='lab' for='R3'></label>
<hr>
<a href='#T1' target='_self'>STOP</a>
<a href='#T2' target='_self'>SLOW</a>
<a href='#T3' target='_self'>GO</a>
<b id='T1'> </b>
<b id='T2'> </b>
<b id='T3'> </b>