CODEWITHSUNDEEP
cssradio-button
Can
Can

Reputation: 4726

Text Next to Styled Radio Button

I've customised my radio buttons with the help of this tutorial.

Now I'm trying to add text next to the radio buttons but I can't really figure it out with this structure I've got.

Any ideas?

HTML:

<fieldset>
<div class="radioButton">
    <input type="radio" name="x" value="y" id="y" />
    <label for="y"></label>
</div>

<div class="radioButton">
    <input type="radio" name="x" value="z" id="z" />
    <label for="z"></label>
</div>
</fieldset>

CSS:

input[type=radio] {
  visibility: visible; }

.radioButton {
  width: 22px;
  height: 22px;
  background: #dedede;
  margin: 20px 0px;
  border-radius: 100%;
  position: relative; }

/* Create the radio button */
.radioButton label {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 100px;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  -ms-transition: all .5s ease;
  transition: all .5s ease;
  cursor: pointer;
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: 1;
  background: white; }

/* Radio button checked state */
.radioButton input[type=radio]:checked + label {
  background: #77a942; }

/*

Upvotes: 0

Views: 190

Answers (3)

omma2289
omma2289

Reputation: 54619

Try adding the text inside the label and using CSS to indent it

.radioButton label{
    text-indent: 2em;
}

UPDATE

Here's a better implementation using CSS's :before pseudo-element

Demo fiddle

input[type=radio] {
    visibility: visible;
}
.radioButton {
    height: 22px;
    margin: 20px 0px;
    position: relative;
}
.radioButton label {
    display: inline-block;
    vertical-align: middle;
    padding-left: 0.5em;
}
/* Create the radio button */
 .radioButton label:before {
    content:'';
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
    cursor: pointer;
    position: absolute;
    top: 2px;
    left: 2px;
    z-index: 1;
    background: white;
    border: solid 2px #ddd;
}
/* Radio button checked state */
 .radioButton input[type=radio]:checked + label:before {
    background: #77a942;
}

Upvotes: 2

Barbara Laird
Barbara Laird

Reputation: 12717

Add a div after the radioButton div with your text. This isn't optimal, because the control has highjacked the label, so you can't click on this text and have the control be clicked (unless you add javascript to do that), but it'll look right. http://jsfiddle.net/MdAEG/

<fieldset>
<div class="radioButton">
    <input type="radio" name="x" value="y" id="y" />
    <label for="y"></label>
</div> 
<div class="radioLabel">Hi there</div>

<div class="radioButton">
    <input type="radio" name="x" value="z" id="z" />
    <label for="z"></label>
</div>
<div class="radioLabel">Howdy</div>    
</fieldset>

input[type=radio] {
  visibility: visible; }

.radioLabel {
    float: left;
    clear:right;
    margin: 22px 5px;
}
.radioButton {
  width: 22px;
  height: 22px;
  background: #dedede;
  margin: 20px 0px;
  border-radius: 100%;
  position: relative;
   float: left;
    clear: left;
}

/* Create the radio button */
.radioButton label {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 100px;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  -ms-transition: all .5s ease;
  transition: all .5s ease;
  cursor: pointer;
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: 1;
  background: white; }


/* Radio button checked state */
.radioButton input[type=radio]:checked + label {
  background: #77a942; }

Upvotes: 1

Philip Kirkbride
Philip Kirkbride

Reputation: 22859

Just add the following CSS

label{
    padding-left: 23px;
}

Then add some text to your label

<label for="z">Label here</label>

JSFiddle - http://jsfiddle.net/z9Pb9/

Upvotes: 0

Related Questions