personalizado - mensaje de confirmacion javascript php

Cómo poner el borde rojo en el botón de opción si la validación de jquery activa

Question

Esta pregunta ya tiene una respuesta aquí:

• Cómo poner un efecto de cuadro rojo de jquery valdiation en botones de radio 1 respuesta

Mi problema es que no puedo hacer que el botón de radio tenga un borde rojo si la validación de jquery se activa como en la imagen de ejemplo. Puede alguien ayudarme con esto, por favor.

http://i38.photobucket.com/albums/e149/eloginko/gender_zps0b3bea26.png

salida actual: http://jsfiddle.net/5kcsn/47/

trío esto pero no funciona

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

Answer 1

No puede agregar el borde al botón de radio pero puede ir con,

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

Answer 2

intente esto ... esto no creará el círculo rojo en el botón de opción pero ayudará a que el usuario entienda el campo requerido.

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

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

Answer 3

use la sombra de la caja del color del borde

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