Question

仅限CSS，我不想添加任何额外的JS。第二个单选按钮未被＆＃34;检查＆＃34;点击时。

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>

CSS：

.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;
    }

Answer 1

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

Answer 2

问题是您的广播项目的位置，因为它们不可见，您无法点击它。您应该使用标签的功能，当您单击它时，选择了有界元素。

http://jsfiddle.net/fvzegu6o/1/

<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>

单击CSS仅选中单选按钮

2 个答案: