Javascript 如果jquery验证激活，如何在单选按钮中添加红色边框

我的问题是，如果jquery验证像示例图片中那样激活，我无法使单选按钮具有红色边框。谁能帮我做这个吗

电流输出：

我做了这个但没用

.radio-class{
    border: solid 1px #a94442;
}

---

您不能将边框添加到单选按钮，但可以使用

input[type="radio"]:focus, input[type="radio"]:active {
    -webkit-box-shadow:inset 2px 1px 1px , 1px 1px 3px #008000;
    -moz-box-shadow:inset 2px 1px 1px #008000, 1px 1px 3px #008000;
    box-shadow:inset 2px 1px 1px #008000, 1px 1px 3px #008000;
}

---

试试这个。。这不会在单选按钮中创建红色圆圈，但会帮助用户理解所需字段

<form>
    <div class="container">
        <div class="row">
            <div class="col-xs-11">
                <br />
                <div class="row">
                    <div class="col-sm-7">
                        <div class="form-group">
                            <input type="text" id="name" class="form-control" name="name" placeholder="Your Name" required="required" />
                        </div>
                    </div>
                    <div class="col-sm-7">
                        <div class="form-group">
                            <input type="text" id="age" class="form-control" name="age" placeholder="Your Age" required="required" />
                        </div>
                    </div>
                    <div class="col-sm-12">
                        <div class="form-group input-group">
                            <input type="radio" name="gender" value="male" required="required" />
                            <label id="myGender">&nbsp;Male&nbsp;&nbsp;</label>
                            <input type="radio" name="gender" value="female" required="required" />
                            <label id="myGender">&nbsp;Female</label>
                            <p class="help-block"> Please Choose your gender</p>
                        </div>

                    </div>
                     <div class="col-sm-12 dateWrap">
                        <div class="form-group input-group">
                            <div class="btn-group input-group"> <span class="input-group-addon fixedSize">Birthday</span>

                                <select name="month" onmousedown="if(this.options.length>6){this.size=6;}" onchange='this.size=0;' onblur="this.size=0;" class="btn btn-default" id="bmonth">
                                    <option value="">Month</option>
                                </select>
                                <select name="day" onmousedown="if(this.options.length>6){this.size=6;}" onchange='this.size=0;' onblur="this.size=0;" class="btn btn-default" id="bday">
                                    <option value="">Day</option>
                                </select>
                                <select name="year" onmousedown="if(this.options.length>6){this.size=6;}" onchange='this.size=0;' onblur="this.size=0;" class="btn btn-default" id="byear">
                                    <option value="">Year</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12">
                        <div class="form-group input-group">
                            <button type="submit" class="btn btn-info input-default" id="create">Submit</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

男性
女性
请选择您的性别
生日
月
白天
年
提交

---

使用框阴影边框颜色

 <input type="radio" required="required" value="female" name="gender" style="box-shadow: 0px 2px 8px rgb(255, 0, 0);">

All browser不支持将css直接指向radio元素。你可以用这个。。。请不要发布重复的问题。