How to display radio buttons as <div> - html

Question

I want to display my radio buttons as so that i can give style sheet and make div clickable.
here are my radio buttons.
and I want to show them like this.
div as radio
This is what I have tried but did not work.
HTML
<div class="radio-toolbar">
<table>
<tr>
<td><input type="radio" id="radioone" name="product" value="first">
<label for="radioone">50</label></td>
<td><input type="radio" id="radiotwo" name="product" value="second">
<label for="radiotwo">100</label></td>
<td><input type="radio" id="radiothree" name="product" value="third">
<label for="radiothree">500</label></td>
</div>
CSS
.radio-toolbar input[type='radio']:focus + label {
border: 2px thin blue;
}
.radio-toolbar input[type='radio']:checked + label {
background-color: #86b1f7;
border-color: #4c4;
color: white;
}
So how can I achive this
Small help will be appreciated.
Thanks in advance :)

Answer 1

I had do this before.and I have the code preperd.I hope It will be useful for you.
.switch-field {
display: flex;
overflow: hidden;
direction: ltr;
float: right;
text-align:right;
}
.switch-field input {
position: absolute !important;
clip: rect(0, 0, 0, 0);
height: 1px;
width: 1px;
border: 0;
overflow: hidden;
}
.switch-field label {
/*width: 33.33%;*/
background-color: transparent;
color: #666666;
font-size: 14px;
line-height: 1;
text-align: center;
padding: 10px 12px;
margin-left: 0px;
/*margin-right: -1px;*/
border: 1px solid #ddd;
transition: all 0.1s ease-in-out;
}
.switch-field label:hover {
cursor: pointer;
}
.switch-field input:checked + label {
background-color: #F4F5F9;
box-shadow: none;
border-color: #3E7DE7;
color: #3E7DE7;
}
.switch-field label:first-of-type {
border-radius: 2px 0px 0px 2px;
}
.switch-field label:last-of-type {
border-radius: 0px 2px 2px 0px;
}
<div class="switch-field">
<input class="uk-radio" id="radio-six" type="radio" value="admin" name="user_type" checked>
<label for="radio-six">admin</label>
<input class="uk-radio" id="radio-seven" type="radio" value="user" name="user_type" >
<label for="radio-seven">user</label>
</div>

Answer 2

Here is one way you can customize your radio buttons.
.radio-toolbar .radio-item {
position: relative;
display: inline-block;
vertical-align: top;
margin: 15px 5px;
}
.radio-item input[type="radio"] {
position: absolute;
width: 0;
height: 0;
top: 0;
left: 0;
}
.radio-item label {
padding: 10px;
color: #fff;
border-radius: 10px;
background-color: grey;
border: 1px solid #000;
}
.radio-item input[type="radio"]:checked ~ label {
border-color: #f00;
}
<div class="radio-toolbar">
<div class="radio-item">
<input type="radio" id="radioone" name="product" value="first">
<label for="radioone">50</label>
</div>
<div class="radio-item">
<input type="radio" id="radiotwo" name="product" value="second">
<label for="radiotwo">100</label>
</div>
<div class="radio-item">
<input type="radio" id="radiothree" name="product" value="third">
<label for="radiothree">500</label>
</div>
</div>
Please let me know if this helps.

Answer 3

You need to hide the radio buttons and the left over label is still "clickable"
.radio-toolbar input[type="radio"] {
display: none;
}
I put all the working code on codepen here: https://codepen.io/stormingorman-the-vuer/pen/ExjKRvz

Answer 4

Try Like This. Make Your radio-toolbar input, width: 0;
also make your radio-toolbar label Like this
.radio-toolbar label {
background-color: #A9A9A9;
padding: 10px 20px;
font-size: 16px;
border-radius: 4px;
}