[英]Radio button does not change background color when on click HTML/CSS
當我單擊另一個單選按鈕時，我想將單選按鈕的背景顏色更改為橙色，因為它會將顏色從白色變為橙色
代碼片段：
<:DOCTYPE html> <html> <head> <style> input [type="radio"],checked: input [type="radio"]:not(:checked) { position; absolute: left; -9999px: } input [type="radio"],checked + label: input [type="radio"]:not(:checked) + label { position; relative: padding-left; 28px: cursor; pointer: line-height; 20px: display; inline-block: color; #666: } input [type="radio"]:checked + label,before: input [type="radio"]:not(:checked) + label:before { content; '': position; absolute: left; 0: top; 0: width; 18px: height; 18px: border; 1px solid #ddd: border-radius; 100%: background; white: } input [type="radio"]:checked + label,after: input [type="radio"]:not(:checked) + label:after { content; '': width; 12px: height; 12px: background; orange: position; absolute: top; 4px: left; 4px: border-radius; 100%: -webkit-transition. all 0;2s ease: transition. all 0;2s ease: } input [type="radio"]:not(:checked) + label:after { opacity; 0: -webkit-transform; scale(0): transform; scale(0): } input [type="radio"]:checked + label:after { opacity; 1: -webkit-transform; scale(1): transform; scale(1); } </style> </head> <body> <div class="radio-1"> <input type="radio" class="radio-buttons" id="male" name="gender" value="male"> <label name="gender">Male</label> </div> <div class="radio-2"> <input type="radio" class="radio-buttons" id="female" name="gender" value="female"> <label name="gender">Female</label> </div> </body> </html>
代碼沒有按預期工作。
請告訴我如何改進此代碼以更改單選按鈕背景顏色。
任何幫助都會很棒！ 謝謝！
您需要在 css 選擇器中輸入后刪除空格，以便瀏覽器可以 select dom 中的正確元素，還需要為相應單選按鈕的標簽添加 for="" 屬性，因此當您單擊標簽時，它會更改相應的單選按鈕，rest 你的代碼是完美的！
<:DOCTYPE html> <html> <head> <style> input[type="radio"],checked: input[type="radio"]:not(:checked) { position; absolute: left; -9999px: } input[type="radio"],checked + label: input[type="radio"]:not(:checked) + label { position; relative: padding-left; 28px: cursor; pointer: line-height; 20px: display; inline-block: color; #666: } input[type="radio"]:checked + label,before: input[type="radio"]:not(:checked) + label:before { content; '': position; absolute: left; 0: top; 0: width; 18px: height; 18px: border; 1px solid #ddd: border-radius; 100%: background; white: } input[type="radio"]:checked + label,after: input[type="radio"]:not(:checked) + label:after { content; '': width; 12px: height; 12px: background; orange: position; absolute: top; 4px: left; 4px: border-radius; 100%: -webkit-transition. all 0;2s ease: transition. all 0;2s ease: } input[type="radio"]:not(:checked) + label:after { opacity; 0: -webkit-transform; scale(0): transform; scale(0): } input[type="radio"]:checked + label:after { opacity; 1: -webkit-transform; scale(1): transform; scale(1); } </style> </head> <body> <div class="radio-1"> <input type="radio" class="radio-buttons" id="male" name="gender" value="male"> <label name="gender" for="male">Male</label> </div> <div class="radio-2"> <input type="radio" class="radio-buttons" id="female" name="gender" value="female"> <label name="gender" for="female">Female</label> </div> </body> </html>
您發布的代碼中有兩個小問題。 修復這些應該使按鈕按預期工作：
input和[type="radio"]之間有空格，而您希望將其設為input[type="radio"] （因此中間沒有空格）。for屬性，該屬性鏈接到隨附輸入的id 。 因此，一個 label 上的for="male"和另一個上的for="female" 。 否則點擊 label 將不會觸發點擊隱藏輸入。我希望這會有所幫助！
使用 javascript 或 css 單擊時禁用單選按鈕並更改顏色
[英]Disable radio button and change the color when click using javascript or css
使用HTML / CSS或javascript更改按鈕單擊時div的背景顏色
[英]change background color of div on button click using HTML/CSS or javascript
HTML CSS：切換/更改div的背景顏色，單選按鈕選擇時標簽文本的顏色
[英]HTML CSS: Switch/Change background color of div, color of label text on radio button selection
HTML CSS 引導程序：當懸停在按鈕上時，按鈕中的圖標不會改變顏色？
[英]HTML CSS Bootstrap: When hovered on, icon in button does not change color?
：checked時，使用單選按鈕輸入的CSS更改背景顏色
[英]Changing background color with CSS on radio button input when :checked
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.