单击时未选中仅CSS单选按钮

仅CSS，我不想添加任何额外的JS。单击第二个单选按钮时未“选中”

HTML:

<div class="account-container">
    <div class="form-group">
        <div class="control-container clearfix">
            <div class="col-md-4 radio">
                <input type="radio" name="Gender" value="Mujer" checked />
                <label>Mujer</label>
            </div>
            <div class="col-md-4 radio">
                <input type="radio" name="Gender" value="Hombre" />
                <label>Hombre</label>
            </div>
        </div>
    </div>
</div>

.account-container .radio {
    height: 100%;
    margin: 0;
}

    .account-container .radio label {
        position: relative;
        line-height: 40px;
        cursor: pointer;
        padding-left: 30px;
    }

        .account-container .radio label:before {
            content: " ";
            display: inline-block;
            width: 22px;
            height: 22px;
            position: absolute;
            left: 0;
            top: 9px;
            border: 1px solid #1fb5e1;
            background-color: #fff;
            border-radius: 50%;
        }

    .account-container .radio input[type="radio"]:checked + label:after {
        background-color: #1fb5e1;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        position: absolute;
        content: " ";
        left: 5px;
        top: 14px;
    }

---

问题在于收音机项目的位置，因为它们不可见，所以您不能单击它。 您应该使用标签的功能，当您单击它时，将选中有界元素

穆杰尔
霍姆布雷

问题在于收音机项目的位置，因为它们不可见，所以您不能单击它。 您应该使用标签的功能，当您单击它时，将选中有界元素

穆杰尔
霍姆布雷

您需要将

显示：无

更改为

不透明度：0

，并更改实际单选按钮的位置<代码>显示：无不允许您单击它，

不透明度：0

允许。并且文件中的位置不在样式按钮后面。您需要将

display:none

更改为

opacity:0

，并更改实际单选按钮的位置<代码>显示：无不允许您单击它，

不透明度：0

允许。文件中的位置不在样式按钮后面。

<input type="radio" id="id_of_radio">
<label for="id_of_radio">

<div class="col-md-4 radio">
    <input type="radio" name="Gender" value="Mujer" id="mujer" checked />
    <label for="mujer">Mujer</label>
</div>
<div class="col-md-4 radio">
    <input type="radio" name="Gender" value="Hombre" id="hombre" />
    <label for="hombre">Hombre </label>
</div>