How To Put Red Border In The Radio Button If Jquery Validation Activates

My problem is i cant make the radio button have a red border if the jquery validation activates just like in the example picture. Can anyone help me with this please. http://i38.ph

Solution 1:

You can't add border to radio button but you can go with,

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

Solution 2:

try this.. this will not create the red circle in the radio button but help user understand the required field.

<form><divclass="container"><divclass="row"><divclass="col-xs-11"><br /><divclass="row"><divclass="col-sm-7"><divclass="form-group"><inputtype="text"id="name"class="form-control"name="name"placeholder="Your Name"required="required" /></div></div><divclass="col-sm-7"><divclass="form-group"><inputtype="text"id="age"class="form-control"name="age"placeholder="Your Age"required="required" /></div></div><divclass="col-sm-12"><divclass="form-group input-group"><inputtype="radio"name="gender"value="male"required="required" /><labelid="myGender">&nbsp;Male&nbsp;&nbsp;</label><inputtype="radio"name="gender"value="female"required="required" /><labelid="myGender">&nbsp;Female</label><pclass="help-block"> Please Choose your gender</p></div></div><divclass="col-sm-12 dateWrap"><divclass="form-group input-group"><divclass="btn-group input-group"><spanclass="input-group-addon fixedSize">Birthday</span><selectname="month"onmousedown="if(this.options.length>6){this.size=6;}"onchange='this.size=0;'onblur="this.size=0;"class="btn btn-default"id="bmonth"><optionvalue="">Month</option></select><selectname="day"onmousedown="if(this.options.length>6){this.size=6;}"onchange='this.size=0;'onblur="this.size=0;"class="btn btn-default"id="bday"><optionvalue="">Day</option></select><selectname="year"onmousedown="if(this.options.length>6){this.size=6;}"onchange='this.size=0;'onblur="this.size=0;"class="btn btn-default"id="byear"><optionvalue="">Year</option></select></div></div></div><divclass="col-sm-12"><divclass="form-group input-group"><buttontype="submit"class="btn btn-info input-default"id="create">Submit</button></div></div></div></div></div></div></form>

http://jsfiddle.net/alaskaz1864/5kcsn/51/

Solution 3:

use box shadow the border color

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