How to style span radio buttons with CSS without images

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> &nbsp;
 <input type="radio" name="RVCategory" value="Motorhome" checked="checked">
 </span>
 <span class="wpcf7-list-item last">
           <span class="wpcf7-list-item-label">Trailer
           </span>&nbsp;
 <input type="radio" name="RVCategory" value="Trailer">
 </span>
 </span>
 </span>

I have restarted many times on [Fiddle](https://jsfiddle.net/dewaynephillips/trvogxws/) so if you check it out now there is not much, because I thought I would start over again — Press Awesome, Jul 27 '16 at 06:16
Ok here is my new CSS on [Fiddle](https://jsfiddle.net/dewaynephillips/trvogxws/9/) but I still can not get the black dot for the checked one. Any help would be appreciated. — Press Awesome, Jul 27 '16 at 06:36

Jon P · Accepted Answer · 2020-06-21T22:51:39.333

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>

Thank you for the suggestions, I am using Contact Form 7 and it generates the HTML as I am sure you know. I know I thought the span was overused myself, but what do i know. — Press Awesome, Jul 27 '16 at 06:53
Nope no idea, I have no idea what Contact Form 7 is or what it does. I suggest you include this information in the question itself, letting us know you have limited control over the HTML is **important**. If Contact Form 7 is not using `label` it is producing poor html! Best practice is that every form element should have a coresponding `label` — Jon P, Jul 27 '16 at 07:01
I would add labels: http://contactform7.com/faq/can-i-add-text-labels-to-input-fields/ — Jon P, Jul 27 '16 at 07:03

score 0 · Answer 2 · answered Jul 27 '16 at 06:19

0

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;">

answered Jul 27 '16 at 06:19

Chi

46
2

Ok here is the final [Fiddle](https://jsfiddle.net/dewaynephillips/trvogxws/12/) Everything works now. Thanks guys. Marking as reslolved. – Press Awesome Jul 27 '16 at 07:03

score 0 · Answer 3 · answered Jul 27 '16 at 06:45

0

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>

answered Jul 27 '16 at 06:45

rockey dsouza

84
7

I have updated my CSS once again. Except there is a blue square box when I select the radio button. Here is my updated [Fiddle](https://jsfiddle.net/dewaynephillips/trvogxws/10/) Is there a way to get rid of the square blue box? Oh yeah and by the way thanks everyone for all the help. – Press Awesome Jul 27 '16 at 06:49
See http://stackoverflow.com/questions/3397113/how-to-remove-border-outline-around-text-input-boxes-chrome on how to remove the blue box. – Jon P Jul 27 '16 at 06:59
I did and that is how i fixed the problem. I tried to vote you all up but I can not since I do not have a 15 rep. but +1 anyways – Press Awesome Jul 27 '16 at 07:06

How to style span radio buttons with CSS without images

3 Answers3