在复选框内设置文本

Question

您好，是否可以在复选框内添加文本来替换勾选图标。

我无法用这段代码实现它，有人可以建议我如何制作一个带有文本的尺寸选择框

<ion-col>
        <p>Choose the size</p>
        <ion-item>
            <ion-checkbox >S</ion-checkbox>  
        </ion-item>       
    </ion-col> 

帮我带出这种类型的用户界面

Answer 1

您可以隐藏input并使用label来选中该复选框。:not(:checked)然后使用和选择器设置标签样式，如下例所示:checked。相同的逻辑可以应用于radio按钮。

ul {
  padding: 0;
  margin: 0;
  clear: both;
}

li{
  list-style-type: none;
  list-style-position: outside;
  padding: 10px;
  float: left;
}

input[type="checkbox"]:not(:checked), 
input[type="checkbox"]:checked {
  position: absolute;
  left: -9999%;
}

input[type="checkbox"] + label {
  display: inline-block;
  padding: 10px;
  cursor: pointer;
  border: 1px solid black;
  color: black;
  background-color: white;
  margin-bottom: 10px;
}

input[type="checkbox"]:checked + label {
  border: 1px solid white;
  color: white;
  background-color: black;
}

<ul>
  <li>
    <input type="checkbox" id="check_1" name="check_1" value="check_1">
    <label for="check_1">S</label>
  </li>
  <li>
    <input type="checkbox" id="check_2" name="check_2" value="check_2">
    <label for="check_2">M</label>
  </li>
  <li>
    <input type="checkbox" id="check_3" name="check_3" value="check_3">
    <label for="check_3">L</label>
  </li>
  <li>
    <input type="checkbox" id="check_4" name="check_4" value="check_4">
    <label for="check_4">XL</label>
  </li>
</ul>