如何创建一个 3 位置切换？

Question

我想在 Web 表单上创建一个 3 个位置（或更多）的开关来替换单选按钮。像这样的：

选择的值应该与未选择的颜色不同，并且只能选择一个值。你会怎么做？您将如何从表单中获取选定的值？

Answer 1

cmets 中提供的链接解释了这一切，基本上它适用于:checked + label 和input 的绝对位置。

/* styling*/
.optionlabel {
  display:table;
  border-collapse:collapse;
  border:1px solid lightblue;
}
.optionlabel [type="radio"] {
  position:absolute;
  left:-9999px
}
.optionlabel label {
  display:table-cell;
  width:100px;
  height:50px;
  border-left:inherit;
  text-align:center;
  vertical-align:middle;
}
/* your magic ? */
:checked + label {background:#7ED321;}

<p class="optionlabel">
<input id="option1" type="radio" name="option"/><label for="option1">Option 1</label>
<input id="option2" type="radio" name="option"/><label for="option2">Option 2</label>
<input id="option3" type="radio" name="option"/><label for="option3">Option 3</label>
</p>

（下次如果你提供你的 html/bootstrapped 我们用它来演示）