How to style span radio buttons with CSS without images - css

Question

I have tried to style these radio buttons with css but i can not figure out why it will not style. I am trying to have a 30px by 30px radio button with a 3px blue border and the inside of the radio button white with a black dot that is the checked one. Any help would be appreciated.
<span class="wpcf7-form-control-wrap RVCategory">
<span class="wpcf7-form-control wpcf7-radio">
<span class="wpcf7-list-item first">
<span class="wpcf7-list-item-label" style="">Motorhome
</span>
<input type="radio" name="RVCategory" value="Motorhome" checked="checked">
</span>
<span class="wpcf7-list-item last">
<span class="wpcf7-list-item-label">Trailer
</span>
<input type="radio" name="RVCategory" value="Trailer">
</span>
</span>
</span>

Answer 1

Hint 1, always include enough code to replicate your problem. Once finding the fiddle it was easily fixed.
Point 1 : Use the label tag and use it corectly. You are using a span where you should be using label. To associate label with a form element use the for attribute with an Id from the form element. It is the label that gives the user something to click on here.
Point 2: Ordering is important with CSS selectors. If your selector is input + label the label tag must come after the input
Point 3: Learn the realtionship with position:releative and position:absolute
Finaly, the solution:
.wpcf7-form-control-wrap.RVCategory {
max-width: 400px;
margin: 94px auto 0 auto;
}
.wpcf7-list-item label {
position: relative;
}
.wpcf7-list-item-label,
.wpcf7-list-item last {
font-size: 20px;
}
.wpcf7-form-control-wrap.RVCategory input[type="radio"] {
position: absolute;
opacity: 0;
-moz-opacity: 0;
-webkit-opacity: 0;
-o-opacity: 0;
}
.wpcf7-form-control-wrap.RVCategory input[type="radio"]+label:before {
content: "";
/*Note inline-block*/
display: inline-block;
top: 2px;
height: 14px;
width: 14px;
background: white;
border: 1px solid gray;
box-shadow: inset 0px 0px 0px 2px white;
-webkit-box-shadow: inset 0px 0px 0px 2px white;
-moz-box-shadow: inset 0px 0px 0px 2px white;
-o-box-shadow: inset 0px 0px 0px 2px white;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-o-border-radius: 8px;
}
.wpcf7-form-control-wrap.RVCategory input[type="radio"]:checked+label:before {
background: #ef8700;
}
<span class="wpcf7-form-control-wrap RVCategory">
<span class="wpcf7-form-control wpcf7-radio">
<span class="wpcf7-list-item first">
<!-- Note the order had changed
and the addition of an id
-->
<input type="radio" name="RVCategory" value="Motorhome" checked="checked" id="rdoMotorHome">
<!--Note the "for" attribute-->
<label class="wpcf7-list-item-label" style="" for="rdoMotorHome">Motorhome</label>
</span>
<span class="wpcf7-list-item last">
<input type="radio" name="RVCategory" value="Trailer" id="rdoTrailer">
<label class="wpcf7-list-item-label" for="rdoTrailer">Trailer</label>
</span>
</span>
</span>

Answer 2

You can change the size but you can't add a border around a radio button with CSS unless you want a square border - and in that case it would be the element around the button, not styled on the button itself. To change the size of the button, your class needs to go with the input tag. Put your class where the inline style is in the example below.
<input type="radio" name="RVCategory" value="Motorhome" checked="checked" style="width:30px;height:30px;">

Answer 3

Below is the code for your reference, this will help you.
[type="radio"] {
border: 0;
clip: rect(0 0 0 0);
height: 1px; margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
label {
display: block;
cursor: pointer;
line-height: 2;
font-size: 20px;
}
[type="radio"] + span:before {
content: '';
display: inline-block;
width: 15px;
height: 15px;
vertical-align: -0.25em;
border-radius: 10px;
border: 3px solid #fff;
box-shadow: 0 0 0 3px #000;
margin-right: 0.75em;
transition: 0.5s ease all;
}
[type="radio"]:checked + span:before {
background: black;
box-shadow: 0 0 0 0.25em #000;
}
<label for="Motorhome">
<input type="radio" value="Motorhome" name="Test" id="Motorhome"> <span>Motorhome</span>
</label>
<label for="Trailer">
<input type="radio" value="Trailer" name="Test" id="Trailer"> <span>Trailer</span>
</label>