0

.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>
Now the text is coming down near the Radio button but it want the text should be in the center.
Sriram
  • 37
  • 1
  • 7

4 Answers4

0

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%;
}

https://jsfiddle.net/tkp2007p/1/

Atula
  • 2,127
  • 2
  • 10
  • 27
  • K fine,inside the checked="checked" the background color should be yellow is it possible? – Sriram May 06 '16 at 07:57
  • glad it helped. Well I have tried a lot for that in past but could found a solution. At last settled with toggle effect with images for checkboxes. – Atula May 06 '16 at 08:05
0

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>
Apb
  • 951
  • 1
  • 8
  • 24
0

    .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 its text in a span with class align
And added line-height to that class.

Sachin
  • 2,257
  • 1
  • 14
  • 30
0

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

https://jsfiddle.net

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:

https://jsfiddle.net

B.P
  • 171
  • 7