Question

我在this教程的帮助下定制了我的单选按钮。

现在我正在尝试在单选按钮旁边添加文字，但我无法用这种结构来解决这个问题。

有什么想法吗？

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

/*

Answer 1

尝试在标签内添加文字并使用CSS缩进

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

<强>更新

这是使用CSS :before伪元素

的更好实现

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

Answer 2

在radioButton div之后添加一个带文字的div。这不是最佳的，因为控件已经劫持了标签，因此您无法单击此文本并单击控件（除非您添加javascript来执行此操作），但它看起来正确。 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; }

Answer 3

只需添加以下CSS

即可

label{
    padding-left: 23px;
}

然后在标签上添加一些文字

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

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

样式单选按钮旁边的文本

3 个答案: