I've used some CSS to make mobile-friendly 'radio' buttons by hiding the input
s and using the label
elements instead. The code is below, but I've made a jsFiddle for convenience.
My problem is that a major usability issue arises when using a keyboard to navigate the form: the fields are no longer tabbable. I've tried adding tabindex
attributes to the hidden input
s, the labels
and to the div
. The first two do not work at all, adding tabindex
to the div works (the div is highlighted), but I can't interact with the form elements at all (with the arrow keys for example).
Is it possible to fix this just with CSS/HTML? I'd rather not fall back to javascript, but if there's no other way I guess I'll have to.
<input type='text'>
<div class='radio-select'>
<input checked="checked" id="no" name="yes_no" value="False" type="radio">
<label for="no">
No
</label>
<input id="yes" name="yes_no" value="True" type="radio">
<label for="yes" >
Yes
</label>
</div>
<input type='text'>
<style>
.radio-select label{
background: #f00;
border:1px solid #ddd;
border-radius:10px;
padding:10px;
margin:5px 0;
max-width:200px;
clear:both;
display: block;
cursor:pointer;
}
.radio-select input[type='radio']{
display: none;
}
.radio-select input[type='radio']:checked + label{
background:#0f0 !important;
}
.radio-select input[type='radio']:checked + label:before{
content:"✔";
}
</style>
No matter how hard you try, you can't turn off radio buttons by clicking on them. Another choice must be clicked to deselect the current one. Since no option is needed or applicable, once a value has been selected, it cannot be changed.
To check which radio button is selected in a form, we first get the desired input group with the type of input as an option and then the value of this selection can then be accessed by the val() method. This returns the name of the option that is currently selected.
No, the radio button control allows for only 1 selection. Instead, you can use the checkboxes control which does allow for multiple selections.
If you hide the input
s by setting their opacity to 0 they will still be tabbable:
.radio-select input[type='radio']{
opacity:0;
filter:alpha(opacity=0);
position:absolute
}
jsfiddle
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With