纯 CSS Radio Button 皮肤，带有 LABEL Radio LABEL（第一个标签是一个图标）都可以点击

Question

我想实现一个具有这种结构的单选按钮：

           A             B
      () LabelA      () LabelB

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

我觉得不可能做的是按照我的意愿正确对齐元素：

我附上了已经完成的结构和基本样式/动画：

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

有什么想法吗？ :)

非常感谢您的帮助，

Answer 1

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

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

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

Answer 2

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

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 选择合适的宽度。

希望对你有帮助。