I am using icheck http://icheck.fronteed.com/ to have fancy radio buttons and check boxes. I am running into an issue though. When I am tabbing through my form and tabbing past the radio button it automatically checks one of the radio buttons.
http://jsfiddle.net/75qmj037/7/
This is an example just tab through the form and see how it automatically checks the radio button. Does anyone know how I can change icheck.js so that this does not happen? I am trying to still be able to tab through the radio buttons but not have it automatically check the first one. I want them to have the same effect as the hover appearance when you tab through just have a ring incase you want to chose them with the spacebar
I have seen other forums saying this is an issue that is being looked into but this is from a few years ago and cannot find a resolution.
Any help with this would be greatly appreciated!
<fieldset class="radio-strip">
<label class="checked">
<input name="amt" value="10" type="radio">
<span class="label-text">$<strong>10</strong></span>
</label>
<label>
<input name="amt" value="25" type="radio">
<span class="label-text">$<strong>25</strong></span>
</label>
<label>
<input name="amt" value="50" type="radio">
<span class="label-text">$<strong>50</strong></span>
</label>
<label>
<input name="amt" value="100" type="radio">
<span class="label-text">$<strong>100</strong></span>
</label>
</fieldset>
</body>
jQuery('input').iCheck({
checkboxClass: 'icheckbox_square-blue',
radioClass: 'iradio_square-blue',
increaseArea: '20%' // optional
});
But, there is a problem. How do you distinguish on which radio button are you?
You can style radio input elements without the need to jQuery or any plugins.
I removed table structure as it was unnecessary HTML and replaced it with div elements.
See this example (Updated Code):
body {
background-color: white;
margin: 0;
padding: 0;
}
input[type='radio'] {
display: none;
}
.radio {
border: 1px solid #b3b4b4;
border-radius: 50%;
box-sizing: border-box;
cursor: pointer;
display: block;
float: left;
height: 16px;
margin: 10px 10px 0 0;
padding: 10px;
position: relative;
width: 16px;
}
.row:hover .radio {
border: 2px solid #218996;
}
input[type='radio']:checked + .radio {
background-color: #218996;
border: 2px solid #218996;
}
input[type='radio']:checked + .radio::before {
content: "✓ ";
position: absolute;
color: white;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size:
}
.row {
border-bottom: 1px solid #dcdcdc;
padding: 0 5px;
}
.row label {
display: inline-block;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: bold;
}
.row > label:last-child {
padding: 12px 0;
width: calc(100% - 50px);
cursor: pointer;
}
<form name="titleTypes" id="titleTypes" method="post" action="process.cfm">
<div>
<!---Label is here for placement of error message--->
<label for="rgroup" class="error" style="display:none;">Please choose one.</label>
</div>
<div class='row'>
<input id="one" type="radio" name="rgroup" value="MV/titleTypeMV.cfm" />
<label for="one" class='radio' tabindex='1'></label>
<label for="one">MOTOR VEHICLE / TRAVEL TRAILER TITLE</label>
</div>
<div class='row'>
<input id="two" type="radio" name="rgroup" value="MH/mobileHome.cfm" />
<label for="two" class='radio' tabindex='1'></label>
<label for="two">MOBILE HOME</label>
</div>
<div class='row'>
<input id="three" type="radio" name="rgroup" value="BOAT/boat.cfm" />
<label for="three" class='radio' tabindex='1'></label>
<label for="three">VESSEL</label>
</div>
<div class='row'>
<input id="four" type="radio" name="rgroup" value="DUPL/duplicate.cfm" />
<label for="four" class='radio' tabindex='1'></label>
<label for="four">DUPLICATE</label>
</div>
<div>
<button class="btn-u" type="submit" name="submit" id="submitBtn" class="submitBtn"><i></i>Next</button>
</div>
This will solve the issue but you have to add tabindex to each element (it could be the same value for all).
From MDN:
The tabindex global attribute is an integer indicating if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation, and if so, at what position. It can take several values:
a negative value means that the element should be focusable, but should not be reachable via sequential keyboard navigation;
So, you may set the tabindex to -1 for your radio buttons:
The snippet:
jQuery('input').iCheck({
checkboxClass: 'icheckbox_square-blue',
radioClass: 'iradio_square-blue',
increaseArea: '20%' // optional
});
jQuery('input').attr("tabindex", "-1");
.icheckbox_square-blue,
.iradio_square-blue {
display: inline-block;
*display: inline;
vertical-align: middle;
margin: 0;
padding: 0;
width: 22px;
height: 22px;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAAAYCAYAAADEQnB9AAAIUElEQVR4Xu2ca2xT5x3G/3YIBOblDrm5AULoti7hIi00EMYuiMIYMFFtKqEd0tAu1ToJBi2wT+XDYFu7S/tlaKsEUrcRkCa2lY5L+2VaGpRtSC1JIIAdJxQopA1JHByckDjZc6LnRNarHh/b51gkth/pp2Nhnx+v3r//fo+Pc46j9f3mcUlAqpY96RBk8SsX6LcdB7cJ8Xv2rZrwt33wn4MJmp+DcAuSKH9EL/7vPGzqwTfAElAMHoJbwAvOggbQF8mz9Z2QGCQqP+aZ/ujh+8ry+Flno/mZrZUJLAZFwAVCYAD0Ag9oQx2DEeZYIsSan8zg1mGhUT9t4OOSXDlo19xY+FCwDGuThc1PwT5wHPwBtIC7YCZwg0o2hg+8Cn4HghJdwv25Ehb6P082gUNoxAk/GikYZePG5I9l/KyN1hMrQR1oBRdBNwiADJAN8tl4u/D6JmybUesRiS7h/iwJC/2F5HGw1swPWeIT74eE+ukY/4qehs27AJvT4F2uWjcVwUNwlbwNfsFm+S/YDLokcnR/FRA+bgBNoDvsA2IZqKfzEKhHXTej3l0mzav4TcnV/Wbj5/xor98OOsAR4Fd8IdBDroNGNuMPsO9xNFm/RI7unxfDh+FaUG3kd0qqJN28br7h/gT2sHnNjiBugb3cpxHAYRjdX8XtN8EWNvCHYBjcB+2ggc9tDN8HDWro53P0x5wqs/FjfrKx2QkugfPAH8X8DIDz3GcnHUahn80bG/N0f7qBUxAeNp/iqvJKHF8FtH2O0DEbqNH9bnCajXkmiiOss3ztae57Co1Kv3rYTH/8cRuNn4fNz4D/gaY45qeJ+z4DV6YgCro/W+JPtu5PN3DqsRu8Bw5bONdxmKvYbgN/DbgIdoBADF+TAtznIh3Gfqsx9tfyKKHRwvw00lFr4C8Ti6GjNrUaOL365mNzALxm1UXHfgDnZOifPNnXH8e5Dm2fl+nYjxV30s/H9FtHHT/PNq8GzVbFdNTRqYd+m0J/yjfw87Vuaf5JjSwpccl0jHv+otVPLKl5MSevoMxEUA/+DD604aepm3TVK/4c8Bb4p4Wf7c7QkWPgt6u+qr8atAC/DfPjp6ta8WfZVV+6qlO6gXfWlMreNeVSMCdTvlKRJ9MtZeUVK3PzCtc6nc7PZOfkV5oI1oPzYl/OgQ2KX0uDZTMdqt/m+qr+RaBD7IsXVCp+u+tbmdQNnJnhkO+vKJWKgtmi5tnlxXLgawtEy7lr9+T3F27JVIvTmZGBIq5yfTanUBWUuhfU5OXPfUqQYHDwyq0b3n+b6JaBD8S+XAJLFb+WC5bNdKh+m+ur+ovBXbEv3aBI8dtd36KkbuAfPlkm+7+6QE5sr5LqYpfo+Xb1PHl5XYU4IHjX0yt73r4uofHxKbjCLqxDEdeVL3z8ezm5BaXCFJeVL88vLNooyFDwwdVOT/upccREVwS6E/gG1R932+QW1W9zfVWnCwTEptDlUvx219eV1A38zvVe+WRwRPJmZ8qb274oNY9ly6YvFMrPNyyaKO6/fH2y661rMhIal6mY/t6e9rGxUACHUHPc8yt25BXMnV9U4q4qnFuyWZDhoaDH57nyV7wmJOYZBrMkcRnmdlai/Amu72iC/6BpNBH1TeoG9vQ8kO3HW+X2wLC4ZmbI0e88Ib/etFgyHA5p7OyXF/7G4k7R3B/o/+SG7/qxUGjU73A4Z5W6Fz43t6jsaQgcKG5Hh+fyyWiKS+6AErEv6op+h9sSm9yi+m2vL/3qimkT6ooeSEB9A0l/EqurbwhFbpPO3qBkzXBOFPfCDb+88Per8jA0JlM9g4GB3q6Oq8dGR0fuORyOGRPFHR7y+bxXTqK2oRhU18DnxL4sBZcUv5blYj2rgKh+m+ur+ntAYQI/4HoSUN/ulDgL/RFW4HoUue1uQN7r6pfnT7VLcGRMpkuCDwb9nd72YyMjD+9oK6/Pc/lECBWPUXMerBf7sgGcU/xa6i2b6VD9NtdX9XeARWJfKoFX8dta33D/DEny3HswIlvfbJHpGhR28Nrl9/9o8acZH/gVuGnxYojHsHkOVCj+Q2F/23wmzssDN9IxQKfqz7Gpvn7F3wp2gSbgtzg/ObxI5HXF/3WQZVN9h+hM9hU4DS9I6GXz7hbr2U0XnJOhfyI/U9+oMVwieICOX+KqpEk/H9NvHXX8vN62CdRaFdPRRKce+m0K/ekGTi1eA+vAHguri7bvU5rLwN8KVoMTYE4Mzau99iT4Mmgz8VuLsb8ZVICVFuZnJQ/Fmw383WI9H+v+dAOnEFwRngZ7wUtxNO8+Nv9Wgwvjdf9H4FvKX2tFal79+/QWcFvzf9qF/fw3+uPObaPx82L5k2AVqItjfurY/CfoUqP770v8GdD9qdnA6Sb2coXcAX4D3NFcQwy0136X+8JhGK++inJ7FvwDbAPlYCbI5ONtfO5s2D5r0KiGfj63mv5Y02Y2fn7VOAqWgvUgO4r5yQbruc9ROoyi+z+Oa+Wl/1HekWM8ju9GYmvSTdyJhlzBu2y0gr9wBWxRfs9dwhX0WfAqWAGCYh4fX7sHvAi2EKP46f+tsvIaNXEnVm19/C+BXImc/mhvqcP56cP8vMHvsj/mvHhBNwjQ6QJFoJLz1ATe4Mpolj5AP2+pY37CKqpb6oxbOPaXFMjBZJkbHk4fxtiO8PYuP2LDlgBhI7ewsStAn8SWIDgENL960zkH/a3gDGjgSaqow0Y/jEbWx78hwviPxzp+NkojaneRV/18iQ3roiDAhvaC1zmfsWTCD3R/ZQR/q5lfuyul1TeEopw+qyzfEI/yWl2rc/9Ix8C7Uj7S+UcjW63/tK6vU6Zt0qRJ5/+eQgtux9fAPAAAAABJRU5ErkJggg==') no-repeat;
border: none;
cursor: pointer;
}
.icheckbox_square-blue {
background-position: 0 0;
}
.icheckbox_square-blue.hover {
background-position: -24px 0;
}
.icheckbox_square-blue.checked {
background-position: -48px 0;
}
.icheckbox_square-blue.disabled {
background-position: -72px 0;
cursor: default;
}
.icheckbox_square-blue.checked.disabled {
background-position: -96px 0;
}
.iradio_square-blue {
background-position: -120px 0;
}
.iradio_square-blue.hover {
background-position: -144px 0;
}
.iradio_square-blue.checked {
background-position: -168px 0;
}
.iradio_square-blue.disabled {
background-position: -192px 0;
cursor: default;
}
.iradio_square-blue.checked.disabled {
background-position: -216px 0;
}
/* HiDPI support */
@media (-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi),
(min-resolution: 1.25dppx) {
.icheckbox_square-blue,
.iradio_square-blue {
background-image: url('data:image/png;base64,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');
-webkit-background-size: 240px 24px;
background-size: 240px 24px;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.rawgit.com/fronteed/icheck/1.x/icheck.min.js"></script>
<fieldset class="radio-strip">
<label class="checked">
<input name="amt" value="10" type="radio">
<span class="label-text">$<strong>10</strong></span>
</label>
<label>
<input name="amt" value="25" type="radio">
<span class="label-text">$<strong>25</strong></span>
</label>
<label>
<input name="amt" value="50" type="radio">
<span class="label-text">$<strong>50</strong></span>
</label>
<label>
<input name="amt" value="100" type="radio">
<span class="label-text">$<strong>100</strong></span>
</label>
</fieldset>
