0

在本教程的帮助下，我自定义了我的单选按钮。

现在我正在尝试在单选按钮旁边添加文本，但我无法用我所拥有的这种结构真正弄清楚。

有任何想法吗？

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

/*
4

3 回答 3

2

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

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

更新

这是使用 CSS:before伪元素的更好实现

演示小提琴

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;
}
于 2013-08-02T22:58:09.787 回答
1

在带有文本的 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; }
于 2013-08-02T23:03:51.477 回答
0

只需添加以下 CSS

label{
    padding-left: 23px;
}

然后在标签中添加一些文本

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

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

于 2013-08-02T22:51:20.900 回答