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

Question

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

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

Answer 1

注释中提供的 link 解释了这一切，基本上它适用于 :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我们用它来演示）

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

How to create a 3 positions toggle?

javascript

css

toggle

twitter-bootstrap-3