Align label with css 3 fancy radio button - html

Question

I have the following radio button, I need the bigger circle to be 38px
input[type=radio] {
visibility: hidden;
}
.label {
font-weight: normal;
color: #333;
}
.label::before {
content: '';
position: absolute;
left: 0;
width: 38px;
height: 38px;
border: 1px solid #727272;
border-radius: 50%;
}
input[type=radio]:checked+label:after {
content: '';
position: absolute;
width: 38px;
height: 38px;
left: 0;
background: #0065bd;
border: none;
transform: scale(0.5);
border-radius: 50%;
}
<div class="container">
<input type="radio" id="radio1" value="on">
<label for="radio1" class="label">Yes</label>
</div>
Here is a fiddle, how can I align the label so it is aligned to the centered and pushed to the right of the circle?

Answer 1

Add .container{ line-height:38px} to have it centered (it seems that it was to the right already)
https://jsfiddle.net/8gubpzhq/
to move it to the right add this to the
.label {
font-weight: normal;
color: #333;
padding-left:5px;//add this line
}
https://jsfiddle.net/vszuu535/

Answer 2

You can add line-height:40px; to your .label to center it vertically. To move it over to the right more you can add padding-left:20px; (You can change the line-height and padding-left to fit your needs).
input[type=radio] {
visibility: hidden;
}
.label {
font-weight: normal;
color: #333;
line-height:40px;
padding-left:20px;
}
.label::before {
content: '';
position: absolute;
left: 0;
width: 38px;
height: 38px;
border: 1px solid #727272;
border-radius: 50%;
}
input[type=radio]:checked + label:after {
content: '';
position: absolute;
width: 38px;
height: 38px;
left: 0;
background: #0065bd;
border: none;
transform: scale(0.5);
border-radius: 50%;
}
<div class="container">
<input type="radio" id="radio1" value="on">
<label for="radio1" class="label">Yes</label>
</div>

Answer 3

Perhaps your code is over-complicating matters; as you want the input to be bigger, maybe you should focus the sizing etc on the input rather than the label?
See the snippet (the radio turns blue now since edit, adapted from this codepen. It's grey before click, blue after, centered, and indented from the edge).
Just a note: If you are going to use a default value (and only have one option) maybe a custom checkbox would be a more suitable choice? (Radios button are usually used in instances where the user would have 2 or more choices, but can only select one).. just a thought.
input[type="radio"] {
display: none;
width: 38px;
height: 38px;
border: 1px solid #727272;
}
input[type="radio"]+label span {
display: inline-block;
width: 38px;
height: 38px;
margin: 9px;
vertical-align: middle;
cursor: pointer;
border-radius: 50%;
background-color: grey;
}
input[type="radio"]:checked+label span {
content="";
background: #0065bd;
}
input[type="radio"]+label span,
input[type="radio"]:checked+label span {
-webkit-transition: background-color 0.4s linear;
-o-transition: background-color 0.4s linear;
-moz-transition: background-color 0.4s linear;
transition: background-color 0.4s linear;
}
<div class="container">
<input type="radio" id="radio1" name="radio">
<label for="radio1" class="label"><span></span>Yes</label>
<input type="radio" id="radio2" name="radio">
<label for="radio2" class="label"><span></span>No</label>
</div>