Radio button CSS - css

Question

I am trying to figure out how to use css to replace all my radio buttons the same way. Is it possible to use css to just make these radio buttons work no matter where the location of the input is? I dont want to to have to adjust for rows or anything. Just by grabbing the radio button and cssing it the way i have in the example below.
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>
I want the input radio to be able to just work exactly as these radio buttons whether there on a table or any where just by calling the class. Is this possible to do?

Answer 1

Per our conversation in the comments, I slightly modified your CSS to work outside of the rows they were designed for. Mainly, I added a clear: both; to .radio to put each input on a new line, and added float: left; to both labels so they keep in line.
input[type='radio'] {
clear: both;
float: left;
width: 20px;
height: 10px;
opacity: 0;
}
.radio {
border: 1px solid #b3b4b4;
border-radius: 50%;
box-sizing: border-box;
cursor: pointer;
display: block;
height: 16px;
margin: 0 10px 10px -20px;
padding: 10px;
position: relative;
width: 16px;
}
input[type='radio']:checked + .radio {
background-color: #218996;
border-color: #218996;
}
input[type='radio']:active + .radio,
input[type='radio']:focus + .radio {
border-color: lightblue;
}
input[type='radio']:checked + .radio::before {
content: "✓ ";
position: absolute;
color: white;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
label {
float: left;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: bold;
line-height: 20px;
}
<input id="one" type="radio" name="rgroup" tabindex='1' />
<label for="one" class='radio'></label>
<label for="one">Button 1</label>
<input id="two" type="radio" name="rgroup" tabindex='2' />
<label for="two" class='radio'></label>
<label for="two">Button 2</label>

Answer 2

When you say do it by classes, do you mean you want to be able to toggle from one state to another state without JS/jQ? Here's a demo I did in CSS, which shows how to hook into a radio or checkbox``:checked state.
Added OP's example and fixed the jerky motion when hovered over. This side-effect occurs when a state has more padding, margins, font-size, borders, etc. than it's counterpart. For example, take Snippet 2 as an example.
When hovered over the radio buttons and row would jerk around which is very irritating and distracting. In this case, there were several rulesets that had a border of 1px, while others had 2px. All you have to do is make sure all borders have the same width.
Added inset box-shadow to each radio to give them some depth on hover.
Added box-shadow to each row in order to define them a little.
Added animated borders to each row as well.
SNIPPET 1
html,
body {
box-sizing: border-box;
background: #111;
color: #DDD;
font: 400 16px/1.4'Verdana';
height: 100vh;
width: 100vw;
}
*,
*:before,
*:after {
box-sizing: inherit;
margin: 0;
padding: 0;
border: 0 none hlsa(0%, 0, 0, 0);
outline: 0 none hlsa(0%, 0, 0, 0);
}
fieldset {
margin: 0 1em 1em 0;
padding: 8px;
border-radius: 9px;
border: 3px double #FF8;
width: 100%;
max-width: 19em;
}
legend {
font: small-caps 700 1.5rem/2"Palatino Linotype";
color: #FD1;
}
/* CheX */
#chex input.chkrad {
display: none;
}
#chex input.chkrad + label {
color: #DDD;
font-size: 16px;
}
#chex input.chkrad + label span {
display: inline-block;
width: 12px;
height: 12px;
margin: -1px 15px 0 0;
vertical-align: baseline;
cursor: pointer;
}
#chex input + label span {
background: #555;
line-height: 100%;
}
input.X:checked + label span {
padding: -3px 10px 3px;
}
input.X:checked + label span:before {
content: 'X';
color: #F00;
font-family: cursive;
font-style: oblique;
font-weight: 900;
font-size: 20px;
}
/* RadZ */
#radz input.chkrad {
display: none;
}
#radz input.chkrad + label {
color: #EEE;
font-size: 16px;
}
#radz input.chkrad + label span {
display: inline-block;
width: 18px;
height: 18px;
margin: -1px 15px 0 0;
vertical-align: baseline;
cursor: pointer;
}
#radz input + label span {
background: #555;
line-height: 100%;
}
input.A:checked + label span {
padding: -5px 15px 5px;
font-size: 16px;
}
input.A:checked + label span:before {
content: '👊';
color: #e3e;
font-family: cursive;
font-style: normal;
font-weight: 700;
font-size: 24px;
}
input.B:checked + label span {
padding: -5px 15px 5px;
font-size: 16px;
}
input.B:checked + label span:before {
content: '💋';
color: #f99;
font-family: cursive;
font-style: normal;
font-weight: 300;
font-size: 20px;
margin: 0 30px 0 0;
text-align: left;
}
input.C:checked + label span {
padding: -2px 15px 2px;
font-size: 16px;
}
input.C:checked + label span:before {
content: '🍸';
color: #3ef;
font-family: cursive;
font-style: normal;
font-weight: 500;
font-size: 20px;
line-height: .75;
vertical-align: bottom;
margin-top: 5px;
}
input.D:checked + label span {
padding: -5px 15px 5px;
font-size: 16px;
}
input.D:checked + label span:before {
content: '💀';
color: #eee;
font-family: cursive;
font-style: normal;
font-weight: 100;
font-size: 20px;
line-height: .75;
}
input.fade + label span,
input.fade:checked + label span {
-webkit-transition: background 0.7s linear;
-moz-transition: background 0.7s linear;
transition: background 0.7s linear;
}
.red {
color: red;
}
<fieldset id="chex" name="chex">
<legend><span class="red">X</span> Marks the Checkbox</legend>
<input type='checkbox' name='chk3' id="chk3" class="chkrad X fade" value='x' />
<label for="chk3"><span></span>Red "X" mark</label>
</fieldset>
<fieldset id="radz" name="radz">
<legend>Shore Leave</legend>
<input type='radio' name='rad' id="rad1" class="chkrad A fade" value='1' />
<label for="rad1"><span></span>Brawl</label>
<br/>
<input type='radio' name='rad' id="rad2" class="chkrad B fade" value='2' />
<label for="rad2"><span></span>Women</label>
<br/>
<input type='radio' name='rad' id="rad3" class="chkrad C fade" value='3' />
<label for="rad3"><span></span>Drink</label>
<br/>
<input type='radio' name='rad' id="rad4" class="chkrad D fade" value='4' />
<label for="rad4"><span></span>All of the above, matey!</label>
<br/>
</fieldset>
SNIPPET 2
body {
background-color: white;
margin: 0;
padding: 0;
}
input[type='radio'] {
display: none;
}
.radio {
border: 2px solid #b3b4b4;
border-radius: 50%;
box-sizing: border-box;
cursor: pointer;
display: table-cell;
float: left;
line-height: 100%;
margin: 10px 10px 0 0;
padding: 10px;
position: relative;
width: 16px;
}
.row:hover .radio {
border: 2px solid #218996;
box-shadow: inset 0 0 10px #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%);
}
.row {
border-bottom: 2px solid #dcdcdc;
padding: 0 5px;
box-shadow: 0 0 10px rgba(0, 128, 192, .3);
}
.row label {
display: block;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-variant: small-caps;
font-weight: bold;
}
.row > label:last-child {
padding: 12px 0;
width: calc(100% - 50px);
cursor: pointer;
}
.btn-u {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-variant: small-caps;
font-weight: bold;
}
.row.bdr {
display: block;
position: relative;
padding-bottom: 1.5px;
}
.row.bdr::before {
content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
transition: width 0s ease, background .5s ease;
}
.row.bdr::after {
content: '';
display: block;
position: absolute;
right: 0;
bottom: 0;
height: 3px;
width: 0;
background: rgba(51, 112, 44, .4);
transition: width .5s ease;
}
.row.bdr:hover::before {
width: 100%;
background: rgba(100, 177, 255, .4);
transition: width .5s ease;
}
.row.bdr:hover::after {
width: 100%;
background: transparent;
transition: all 0s ease;
}
<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 bdr'>
<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 bdr'>
<input id="two" type="radio" name="rgroup" value="MH/mobileHome.cfm" />
<label for="two" class='radio' tabindex='1'></label>
<label for="two">Moble Home</label>
</div>
<div class='row bdr'>
<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 bdr'>
<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>