0
A
回答
1
評論中提供的鏈接解釋了這一切,基本上它適用於: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 /自舉我們用它來證明)
相關問題
- 1. 如何在html中創建3個切換按鈕
- 2. 如何創建一個帶3個選項的切換按鈕...?
- 3. 如何創建類似於Twitter應用程序位置切換按鈕的切換按鈕?
- 4. 如何使用Bootstrap切換插件創建切換按鈕?
- 5. 如何在jQuery上設置cookie切換並記住切換位置?
- 6. jQuery切換元素位置
- 7. 切換背景位置TWICE
- 8. QTreeView切換標籤位置
- 9. ListView在Android切換位置
- 10. 切換位置在谷歌地圖api 3
- 11. 創建動態切換臺
- 12. Chardin.js - 創建切換按鈕
- 13. 切換+進入位置設置
- 14. 如何在ajax調用後設置jquery切換位置
- 15. 如何創建位置矢量?
- 16. AngularJS如何設置切換
- 17. 如何重置jQuery切換?
- 18. Android:問題創建自定義3狀態切換按鈕
- 19. 如何在Rails 3中切換JavaScript庫
- 20. 如何在Rails 3中切換環境?
- 21. Actionscript 3;如何製作切換按鈕?
- 22. 如何快速切換python 2和3?
- 23. 切換3個類onclick(僅切換2)
- 24. 引導3.navbar切換切換狀態
- 25. 如何創建的Rails 3
- 26. 如何創建帶有3
- 27. 根據日期切換核心位置
- 28. 切換功能:記住位置
- 29. 切換位置固定和靜態
- 30. 切換div來計算位置
看看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