.big{ width: 2.5em; height: 1.5em; }
<p>
<input type="radio" name="r1" value="a" checked="checked" class="big" />
<span>Closed</span>
<input type="radio" name="r1" value="b" class="big" />
<span>Pending</span>
</p>
.big{ width: 2.5em; height: 1.5em; }
<p>
<input type="radio" name="r1" value="a" checked="checked" class="big" />
<span>Closed</span>
<input type="radio" name="r1" value="b" class="big" />
<span>Pending</span>
</p>
check this css
.big{ width: 2.5em;
display: inline-block;
vertical-align: top;
}
.align{height: 1.5em;}
.text-big{ font-size:1.2em}
.span{
display: inline-block;
vertical-align: top;
margin-right: 3%;
}
You can use vertical align
for this.
.big{ width: 2.5em; height: 1.5em; }
p span,
p .big{vertical-align: middle}
<p>
<input type="radio" name="r1" value="a" checked="checked" class="big" />
<span>Closed</span>
<input type="radio" name="r1" value="b" class="big" />
<span>Pending</span>
</p>
.align{line-height: 1.5em;}
.big{ width: 2.5em; }
.text-big{ font-size:1.2em}
<p>
<span class="align">
<input type="radio" name="r1" value="a" checked="checked" class="big" />
<span class="text-big">Closed</span>
<input type="radio" name="r1" value="b" class="big" />
<span class="text-big">Pending</span>
</span>
</p>
Here I wrapped the entire
radio
and itstext
in a span with classalign
And addedline-height
to that class.
try this
<p>
<input type="radio" name="r1" value="a" checked="checked" class="big" />
<span>Closed</span>
<input type="radio" name="r1" value="b" class="big" />
<span>Pending</span>
</p>
css:
.big{ width: 2.5em; height: 1.5em; }
.big+span{
font-size:15px;
}
.big ,.big+span{
vertical-align:middle;
}
updated as per your request:
<p>
<input type="radio" name="r1" value="a" checked="checked" class="big" id="r1" />
<label for="r1">Closed</label>
<input type="radio" name="r1" value="b" class="big" id="r2"/>
<label for="r2">Pending</label>
</p>
css:
/* COMMON RADIO STYLES */
input[type=radio]{
/* hide original inputs */
visibility: hidden;
position: absolute;
}
input[type=radio] + label{
cursor:pointer;
}
input[type=radio] + label:before{
height:16px;
margin-right: 4px;
content: " ";
display:inline-block;
vertical-align: baseline;
transition: 0.3s;
border:1px solid #ccc;
border-radius:10px;
box-shadow: inset 0 -3px 6px #e4e4e4;
transition: 0.3s;
}
/* CUSTOM RADIO STYLES */
input[type=radio] + label:before{
border-radius:50%;
width:16px;
}
/* CHECKED */
input[type=radio]:checked + label:before{
box-shadow: inset 0 -1px 3px #e4e4e4, inset 0 0 1px #222, inset 0 0 0 3px yellow;
background:#000;
}
output: