Angular 8中具有多项选择的复选框内包含内容的自定义复选框

Question

我有一个要求，我想要自定义复选框（不必将其作为复选框），其中包含内容，并且可以选择其中的多个，如下所示，

<div class="row">
   <div class="form-group">
      <input type="checkbox" id="html">
      <label for="html"></label>
   </div>
   <div class="form-group">
      <input type="checkbox" id="css">
      <label for="css"></label>
   </div>
   <div class="form-group">
      <input type="checkbox" id="javascript">
      <label for="javascript"></label>
   </div>
</div>

CSS

.form-group {
    display: block;
    margin-bottom: 15px;
  }
  
  .form-group input {
    padding: 0;
    height: initial;
    width: initial;
    margin-bottom: 0;
    display: none;
    cursor: pointer;
  }
  
  .form-group label {
    position: relative;
    cursor: pointer;
  }
  
  .form-group label:before {
    content:'';
    -webkit-appearance: none;
    background-color: orange;
    border: 2px solid tranparent;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
    padding: 15px;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
    margin-right: 5px;
    border-radius: 30px;
  }
  
  .form-group input:checked + label:after {
    content: '';
    display: block;
    position: absolute;
    top: 2px;
    left: 12px;
    width: 6px;
    height: 14px;
    border: solid #0079bf;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }

在这里，用户可以选择和取消选择值（选定的值为深橙色，未选定的值为浅橙色）。我试过这个复选框，但它不能正常工作，因为我们只得到 ok 标志内容，谁能建议我如何实现它。

非常感谢任何帮助。

提前致谢！

Answer 1

为什么要使用之前和之后？只需使用标签本身。

然后您可以隐藏复选框并设置标签样式。

点击标签将选中/取消选中复选框，这会触发标签的样式更改。

.form-group input {
  /* hide the checkbox */
  display: none;
}
.form-group label {
  /* style the label as a circle etc. */
  background-color: white;
}
.form-group input:checked + label {
  /* selected style */
  background-color: orange;
}

<div class="row">
   <div class="form-group">
      <input type="checkbox" id="html">
      <label for="html">html</label>
   </div>
   <div class="form-group">
      <input type="checkbox" id="css">
      <label for="css">css</label>
   </div>
   <div class="form-group">
      <input type="checkbox" id="javascript">
      <label for="javascript">javascript</label>
   </div>
</div>

Answer 2

使用height、width 和opacity 0 隐藏复选框，并使用 CSS 设置标签和文本的样式。

.custom-checkbox {
  display: flex;
}

.custom-checkbox input {
  height: 0;
  width: 0;
  opacity: 0;
}

.custom-checkbox .form-group {
  margin: 0 12px;
  /* adjust spacing here between check boxes*/
}

.custom-checkbox .form-group label {
  display: flex;
  box-sizing: border-box;
  height: 32px;
  width: 32px;
  border-radius: 50%;
  background: #fdf6e1;
  color: #7d6540;
  border: 1px solid orange;
  align-items: center;
  justify-content: center;
  font: 14px helvetica, arial, sans-serif;
  cursor: pointer;
  transition: linear 0.2s
}

.custom-checkbox input:checked+label {
  background: orange;
  color: #FFF;
  border: 1px solid #d4830d;
  text-shadow: 0 0 2px #000
}

<div class="row custom-checkbox">
  <div class="form-group">
    <input type="checkbox" name="week" id="html">
    <label for="html">S</label>
  </div>
  <div class="form-group">
    <input type="checkbox" name="week" id="css">
    <label for="css">M</label>
  </div>
  <div class="form-group">
    <input type="checkbox" name="week" id="javascript">
    <label for="javascript">T</label>
  </div>
  <div class="form-group">
    <input type="checkbox" name="week" id="react">
    <label for="react">W</label>
  </div>
  <div class="form-group">
    <input type="checkbox" name="week" id="vue">
    <label for="vue">T</label>
  </div>
  <div class="form-group">
    <input type="checkbox" name="week" id="typescript">
    <label for="typescript">F</label>
  </div>
  <div class="form-group">
    <input type="checkbox" name="week" id="scss">
    <label for="scss">S</label>
  </div>
  <div class="form-group">
    <input type="checkbox" name="week" id="ux">
    <label for="ux">S</label>
  </div>
</div>