如何創建3位置切換？

我想創建一個3位置（或更多）在Web窗體上替換單選按鈕。是這樣的：如何創建3位置切換？

3 positions toggle

所選的值應是不同的顏色比非選擇的，並且可以僅選擇一個值。你會怎麼做呢？你將如何從表單中選擇所選值？

2015-04-04 Nico Schuele

看看http://code.stephenmorley.org/html-and-css /造型-複選框-AND-RADIO-按鈕/＃imageBased。谷歌__styling單選按鈕_爲更多網站的例子。 – Barmar 2015-04-04 01:15:13

@Barmar他們看起來不錯，但不是我想要達到的。 – 2015-04-04 01:23:27

如何處理jQuery UI Button小部件：https：//jqueryui.com/button/#radio。該演示看起來完全像你想要的。 – Barmar 2015-04-04 01:25:22

評論中提供的鏈接解釋了這一切，基本上它適用於: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 /自舉我們用它來證明）

來源

2015-04-04 01:36:00

如何創建3位置切換？

回答

相關問題