Question

基于this 我用很棒的字体设计了我的复选框。但我想将标签置于我的复选框下方。我已经看过几个带有经典复选框的解决方案，但我不明白在这种情况下如何做到这一点。

HTML：

<div>
  <input id="box1" type="checkbox" class="bus"/>
  <label for="box1">Checkbox 1</label>
  <input id="box2" type="checkbox" />
  <label for="box2">Checkbox 2</label>
  <input id="box3" type="checkbox" />
  <label for="box3">Checkbox 3</label>
</div>

CSS：

/*** custom checkboxes ***/

input[type=checkbox] { display:none; } /* to hide the checkbox itself */
input[type=checkbox] + label:before {
  font-family: FontAwesome;
  display: inline-block;
}

input[type=checkbox] + label:before { content: "\f096"; } /* unchecked icon */
input[type=checkbox] + label:before { letter-spacing: 10px; } /* space between checkbox and label */

input[type=checkbox]:checked + label:before { content: "\f18d"; } /*

checked icon */
input.bus[type=checkbox]:checked + label:before { content: "\f080"; color: red} 
input[type=checkbox]:checked + label:before { letter-spacing: 5px; } /* allow space for check mark */

关于如何做到这一点的任何想法？

Answer 1

您应该将标签分为::before元素和<span>内部：

<label for="box1"><span>Checkbox 1</span></label>

然后在元素之前处理::就像要在标签内定位的普通元素一样，例如：

/* label position */
input[type=checkbox] + label {
  position: relative;
  display: inline-block
}
input[type=checkbox] + label:before {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -10px;
}

请注意，复选框使用此技巧水平居中，仅使用更改的轴：http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

JSFiddle（不包含FontAwesome，但你有这种感觉）： https://jsfiddle.net/aojt0vh0/

在程式化的复选框下设置标签

1 个答案: