使用LABEL Radio LABEL（第一个标签是图标）进行剥皮的纯CSS Radiobutton全部可点击

Question

我想用这种结构实现无线电按钮：

           A             B
      () LabelA      () LabelB

当您单击文本（A），radio（）或Label（因为它们都应属于同一实体）时，无线电圈应该被激活。我希望T1与圆圈和标签A水平居中。

我认为不可能做的就是按照我的要求对元素进行对齐：

我附上了一个小提琴，结构和基本造型/动画已经完成：

https://jsfiddle.net/Lxnqe0xw/1/

有什么想法吗？ ：）

非常感谢你的帮助，

Answer 1

好吧，我想象一下这个方法：

CSS：

div.option span {
    display: block;
    text-align: center;
}
div.option {
    float: left;
    width: 150px;
    text-align: center;
}

HTML：

<div class="option"><label><span>A</span><input type="radio" name="r1"></input>Label A</label></div>
<div class="option"><label><span>B</span><input type="radio" name="r1"></input>Label B</label></div>

您只需为DIV选择合适的宽度。

希望它有所帮助。

Answer 2

＆＃13;

＆＃13;

.transaction-icons {
  display: block;
  position: relative;
  font-size: 25px;
}
.md-radio {
  position: relative;
  display: inline-block;
  text-align: center;
}
.md-radio + .md-radio {
  margin-left: 30px;
}
.superBox {
  display: inline-block;
  position: relative;
}
.labelField {
  display: inline-block;
  position: relative;
  vertical-align: middle;
}
.thebox {
  display: inline-block;
  position: relative;
  vertical-align: middle;
}
.radio-label {
  display: inline-block;
  position: relative;
}
label {
  font-size: 13px;
  color: #888888;
  opacity: 1;
  filter: alpha(opacity=100);
  cursor: pointer;
  width: 30px;
  height: 30px;
}
.md-radio-list {
  margin: 20px 0;
}
.md-radio-list .md-radio {
  display: inline-block;
  margin-bottom: 10px;
}
.radioText {} .checkcontainer {
  position: relative;
  display: inline;
}
.check {
  top: 7px;
  left: 7px;
  width: 10px;
  height: 10px;
  background: #44b4e3;
  opacity: 0;
  z-index: 6;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  transform: scale(0);
  position: absolute;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.box {
  top: 0px;
  border: 2px solid #44b4e3;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  z-index: 5;
}
.md-radio input[type=radio] {
  visibility: hidden;
  position: absolute;
}
.md-radio input[type=radio]:checked ~ label > .superBox .thebox .check {
  opacity: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1);
}
.md-radio input[type=radio]:disabled ~ label,
.md-radio input[type=radio][disabled] ~ label {
  cursor: not-allowed;
  opacity: 0.7;
  filter: alpha(opacity=70);
}
.md-radio input[type=radio]:disabled ~ label > .superBox .thebox .box,
.md-radio input[type=radio][disabled] ~ label > .superBox .thebox .box {
  cursor: not-allowed;
  opacity: 0.7;
  filter: alpha(opacity=70);
}
.md-radio input[type=radio]:disabled:checked ~ label > .superBox .thebox .check,
.md-radio input[type=radio][disabled]:checked ~ label > .superBox .thebox .check {
  cursor: not-allowed;
  opacity: 0.7;
  filter: alpha(opacity=70);
}

＆＃13;

<form role="form">
  <div class="form-md-radios">
    <div class="md-radio-list">
      <div class="md-radio">
        <input type="radio" id="radio1" name="radiogroup" class="md-radiobtn" />
        <label for="radio1">
          <div class="transaction-icons">A</div>
          <div class="superBox">
            <div class="thebox">
              <div class="check"></div>
              <div class="box"></div>
            </div>
            <div class="labelField">Option 1</div>
          </div>
        </label>
      </div>
      <div class="md-radio">
        <input type="radio" id="radio2" name="radiogroup" class="md-radiobtn" />
        <label for="radio2">
          <div class="transaction-icons">B</div>
          <div class="superBox">
            <div class="thebox">
              <div class="check"></div>
              <div class="box"></div>
            </div>
            <div class="labelField">Option 2</div>
          </div>
        </label>
      </div>
    </div>
  </div>
</form>

＆＃13;

＆＃13;

＆＃13;

相同的html结构，但更改了一些css