html - Bootstrap 卡片作为显示数据的按钮

Question

我有一个自定义复选框，我添加了一个文本，我希望文本在复选框的右侧对齐，

这是 jsfidle:https://jsfiddle.net/Mwanitete/ewpo0h1g/1/

这是HTML

<div class="squaredThree">
  <input type="checkbox" name="optionsRadios" id="checkOther" value="other"  >
  <label for="checkOther">Testing Check-Box</label>
</div>

这里是 CSS

/* .squaredThree */
.squaredThree {
  position: relative;
  float:left;
  margin: 10px
}

.squaredThree label {
  width: 20px;
  height: 20px;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  background: #D7B1D7;
  border-radius: 4px; 
}

.squaredThree label:after {
  content: '';
  width: 9px;
  height: 5px;
  position: absolute;
  top: 4px;
  left: 4px;
  border: 3px solid #fcfff4;
  border-top: none;
  border-right: none;
  background: transparent;
  opacity: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.squaredThree label:hover::after {
  opacity: 0.3;
}

.squaredThree input[type=checkbox] {
  visibility: hidden;
}

.squaredThree input[type=checkbox]:checked + label:after {
  opacity: 1;
}
/* end .squaredThree */

.label-text {
  position: relative;
  left: 10px;
}

我的代码中缺少什么？任何建议都会有帮助谢谢

Answer 1

将文本移到标签字段之外，如下所示。

<label for="checkOther"></label>Testing check-box

/* .squaredThree */
.squaredThree {
  position: relative;
  float:left;
  margin: 10px
}

.squaredThree label {
  width: 20px;
  height: 20px;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  background: #D7B1D7;
  border-radius: 4px; 
}

.squaredThree label:after {
  content: '';
  width: 9px;
  height: 5px;
  position: absolute;
  top: 4px;
  left: 4px;
  border: 3px solid #fcfff4;
  border-top: none;
  border-right: none;
  background: transparent;
  opacity: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.squaredThree label:hover::after {
  opacity: 0.3;
}

.squaredThree input[type=checkbox] {
  visibility: hidden;
}

.squaredThree input[type=checkbox]:checked + label:after {
  opacity: 1;
}
/* end .squaredThree */

.label-text {
  position: relative;
  left: 10px;
}
 

     <div class="squaredThree">
      <input type="checkbox" name="optionsRadios" id="checkOther" value="other"  >
      <label for="checkOther"></label>Testing check-box
    </div>  

解决方案 2:您正在使用 .squaredThree label:after 为复选框应用样式，但它也同样应用于标签。因此，使用 before 属性为复选框标签应用样式，如下所示。但在这种情况下，我们在这里给标签值本身。

 .squaredThree label:before {
     content: 'Testing check-box';
     position: absolute;
     top: 4px;
     left: 30px;
     white-space:nowrap;
     background: transparent;
 } 

/* .squaredThree */
.squaredThree {
  position: relative;
  float:left;
  margin: 10px
}

.squaredThree label {
  width: 20px;
  height: 20px;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  background: #D7B1D7;
  border-radius: 4px; 
}

.squaredThree label:after {
  content: '';
  width: 9px;
  height: 5px;
  position: absolute;
  top: 4px;
  left: 4px;
  border: 3px solid #fcfff4;
  border-top: none;
  border-right: none;
  background: transparent;
  opacity: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.squaredThree label:hover::after {
  opacity: 0.3;
}

.squaredThree input[type=checkbox] {
  visibility: hidden;
}

.squaredThree input[type=checkbox]:checked + label:after {
  opacity: 1;
}
/* end .squaredThree */

.label-text {
  position: relative;
  left: 10px;
}
 
.squaredThree label:before {
  content: 'Testing check-box';
  position: absolute;
  top: 4px;
  left: 30px;
  white-space:nowrap;
  background: transparent;
  } 

     <div class="squaredThree">
      <input type="checkbox" name="optionsRadios" id="checkOther" value="other"  >
      <label for="checkOther"></label>
    </div>