CSS - 如何設置所選單選按鈕標簽的樣式？我想為單選按鈕的選定標簽添加樣式：HTML：<div class="radio-toolbar">
<label><input type="radio" value="all" checked>All</label>
<label><input type="radio" value="false">Open</label>
<label><input type="radio" value="true">Archived</label></div>CSS.radio-toolbar input[type="radio"] {display:none;}.radio-toolbar label {
background:Red;
border:1px solid green;
padding:2px 10px;}.radio-toolbar label + input[type="radio"]:checked {
background:pink !important;}我有什么想法我做錯了嗎？
3 回答
qq_遁去的一_1
TA貢獻1725條經驗 獲得超8個贊
.radio-toolbar input[type="radio"] {
display: none;}.radio-toolbar label {
display: inline-block;
background-color: #ddd;
padding: 4px 11px;
font-family: Arial;
font-size: 16px;
cursor: pointer;}.radio-toolbar input[type="radio"]:checked+label {
background-color: #bbb;}<div class="radio-toolbar"> <input type="radio" id="radio1" name="radios" value="all" checked> <label for="radio1">All</label> <input type="radio" id="radio2" name="radios" value="false"> <label for="radio2">Open</label> <input type="radio" id="radio3" name="radios" value="true"> <label for="radio3">Archived</label></div>
首先，您可能希望name在單選按鈕上添加該屬性。否則，它們不屬于同一組，可以檢查多個單選按鈕。
此外，由于我將標簽放置為（單選按鈕的）兄弟，我必須使用id和for屬性將它們關聯在一起。
慕容708150
TA貢獻1831條經驗 獲得超4個贊
如果您確實要將復選框放在標簽內，請嘗試添加額外的span標簽，例如。
HTML
<div class="radio-toolbar"> <label><input type="radio" value="all" checked><span>All</span></label> <label><input type="radio" value="false"><span>Open</span></label> <label><input type="radio" value="true"><span>Archived</span></label></div>
CSS
.radio-toolbar input[type="radio"]:checked ~ * {
background:pink !important;}這將為所選單選按鈕的所有兄弟姐妹設置背景。
至尊寶的傳說
TA貢獻1789條經驗 獲得超10個贊
+當元素不是兄弟元素時，您正在使用相鄰的兄弟選擇器（）。標簽是輸入的父級，而不是它的兄弟。
CSS沒有辦法根據它的后代（也沒有跟隨它的任何東西）選擇一個元素。
你需要尋找JavaScript來解決這個問題。
或者，重新排列標記：
<input id="foo"><label for="foo">…</label>
- 3 回答
- 0 關注
- 1408 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消