如何指示自定义单选按钮已被选中

Question

我有自定义单选按钮。我不得不隐藏原始单选按钮的显示来创建这些大的自定义按钮。我想让用户点击一个按钮，按钮改变颜色以表明用户已经选择了它。

<style>
          #main_page {
          background: #34357c;
          padding: 10px 20px 30px 20px;
          width: 900px;
          height: 600px;
          font-family: 'roboto', sans-serif;
          position: fixed;
          z-index: -1;
          margin-top:315px; 
          margin-left: 415px;
          }
    
        .radio-toolbar input[type="radio"] {
            margin-top: 25px !important;
            opacity: 0 
         }
        
        .radio-toolbar label {
            display: inline-block;
            border-radius: 50px;
            padding: 10px 20px;
            font-size:25px;
            border: 2px solid #444;
            width: 110px;
            height: 110px;
            vertical-align: middle;
            margin-bottom: 20px;
            text-align: center;
            background: #daeaff;
            color: #4c4de4;
           }
        .radio-toolbar input[type="radio"]:checked + label {
        background-color: white; 
        }
 </style>

<!DOCTYPE html>
        <html>
        <head>
             
        
        </head>
        <body>

    <div id= "main_page">
    
    <div class = "radio-toolbar">
    
    
    <input type = "radio" id = "ID1" value = "Husband"><label>Husband</label>
    <input type = "radio" id = "ID2" value = "Wife"><label>wife</label>

    </div>
    </div>
    
    </body>
    </html>

Answer 1

试试像

这样的选择器

input[type="radio"]:checked + label

[type="radio"] 是 HTML 属性的选择器。

:checked 是一个 pseudo-class 允许我们将特殊样式应用于输入的选中状态。

+是相邻兄弟的选择器

这样，当检查输入类型单选时，相邻的标签（紧随其后）必须采用给定的样式。因此，使用 + 组合器，在 HTML 代码中以正确的顺序放置元素很重要。

如何指示自定义单选按钮已被选中

How to indicate a custom radio button is selected

css

radio-button