html - 带有 LABEL Radio LABEL 皮肤的纯 CSS 单选按钮(第一个标签是一个图标)全部可点击

Question

我想用这种结构实现一个单选按钮:

           A             B
      () LabelA      () LabelB

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

我发现不可能做的是按照我的意愿正确对齐元素:

我附上了一个已经完成的结构和基本样式/动画的 fiddle :

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