Poner bordes CSS alrededor de los botones de radio

Question

Estoy tratando de obtener un borde rojo chillón alrededor de algunos botones de opción, pero no aparece en Firefox más reciente o Chrome más reciente. Funciona bien en IE9/IE8.

Cada uno de los elementos de entrada en mi formulario que son necesarios tiene un atributo data-val-required puesto en MVC3. Todos los navegadores colocan los bordes rojos apenas dandy cuando tenemos entradas de texto o de texto, pero estoy luchando con el botón de radio. Para IE, funciona, pero otros navegadores no pondrán el borde rojo alrededor.

css:

input[data-val-required], select[data-val-required], textarea[data-val-required] 
{ 
    background-color: #F0FFFF; 
    border: 1px solid red; 
} 

vista de código:

<label for="WaiveSelect">Do you waive confidentiality?</label><br /> 
<input data-val="true" data-val-number="The field WaiveSelect must be a number." data-val-required="Please select waive." id="WaiveSelect" name="WaiveSelect" type="radio" value="0" /> No, I do not waive confidentiality<br /> 
<input id="WaiveSelect_2" name="WaiveSelect" type="radio" value="2" /> Yes, I waive confidentiality<br /> 
<input id="WaiveSelect_3" name="WaiveSelect" type="radio" value="3" /> Yes, I waive confidentiality except to the client<br /> 
<span class="field-validation-valid" data-valmsg-for="WaiveSelect" data-valmsg-replace="true"></span> 

Lo que se ve en IE (Firefox y Chrome no muestra fronteras):

Answer 1

que podría lograr envolviendo cada < input type = "radio" /> con < div> etiqueta y darle un borde y un flotador de la izquierda ... como esto

<div style="border:1px solid red;float:left"> 
    <input type="radio".. /> 
</div> 
No, I do not waive confidentiality 

Answer 2

No todos los navegadores son compatibles con las fronteras alrededor de botones de radio y casillas de verificación. Hace años voté por un error al incluir esto en Gecko, pero hasta ahora no lo han implementado.

Answer 3

favor probar este http://jsfiddle.net/rp9HJ/1/. te puede ayudar

Answer 4

input[type=radio]{ 
    outline: 1px solid red 
} 

Answer 5

Código completo usando jQuery

https://jsfiddle.net/xcb26Lzx/

$(function(){ 
     $('.layer').css('border',0); 
    $('input:radio').change(
    function(){ 
     if ($(this).is(':checked')) { 
      $('.layer').css('border','1px solid red'); 
     } 
    }); 
}); 

Answer 6

Prueba esto ...

Deja un div alrededor de la entrada y asignar una clase a la div de este modo:

<div class="custom"><input type="radio"></div> 

continuación, abra el archivo CSS personalizado y añadir CSS

.custom {border: 1px solid red; border-radius: 30px; padding: 3px 3px 0 3px; background: red;} 

Esto debería crear un bonito borde rojo alrededor del botón de radio. Si está utilizando una casilla de verificación, simplemente eliminará el radio del borde: 30px del css. Dependiendo de lo que necesites, puedes jugar con el relleno un poco para centrar el botón, pero esto funcionó para mí.

Editar: También querrá asignar el siguiente CSS al div para que se alinee correctamente.

.custom {display: inline;} 

fiddle link

Answer 7

Sé que esto es de cuatro años de edad, pero se me ocurrió una buena solución utilizando elementos CSS Pseudo.

Mi requisito era resaltar una casilla de verificación sin marcar o un botón de opción en la validación.

<input type="radio" class="required" name="radio1"/> 

/* Radio button and Checkbox .required needs an after to show */ 
input[type=radio].required::after, input[type=checkbox].required::after { 
    display: block; 
    width: 100%; 
    height: 100%; 
    background: transparent; 
    content: ''; 
    border: 2px solid red !important; 
    box-sizing: border-box; 
} 
/* Radio buttons are round, so add 100% border radius. */ 
input[type=radio].required::after { 
    border-radius:100%; 
}