复选框内的复选框标签或哪个按钮被激活？

Question

我正在寻找显示如下内容的解决方案：

我想创建一个HTML表单，您可以在其中选择每周多天。像周一，周二等。在图像上，您可以看到当天的德语快捷方式。

我可以通过复选框意识到这一点，但在这里我会遇到问题，它看起来不像图片..我想在复选框中设置标签。它应该完全像在图片上...你有什么想法，我怎么能这样做？

我的另一个想法是创建按钮，如果点击它们只需更改颜色......但我怎么知道点击/选择了哪个按钮？

我会感激任何帮助！

亲切的问候

Answer 1

在类似情况下，我选择隐藏复选框并将样式应用于跨度。看看这个想法，看看它是否适合你。它不需要javascript。

input[type=checkbox] {
    display: none;
}

label :checked + span {
    background: blue;
    color: white;
}

label span {
    display: inline-block;
    background: lightgrey;
    height: 2em;
    width: 2em;
    line-height: 2em;
    text-align: center;
}

<label>
  <input type="checkbox" checked>
  <span>Mo</span>
</label>
<label>
  <input type="checkbox">
  <span>Di</span>
</label>
<label>
  <input type="checkbox">
  <span>Mi</span>
</label>
<label>
  <input type="checkbox">
  <span>Do</span>
</label>
<label>
  <input type="checkbox" checked>
  <span>Fr</span>
</label>
<label>
  <input type="checkbox">
  <span>Sa</span>
</label>
<label>
  <input type="checkbox">
  <span>So</span>
</label>