Putting css borders around radio buttons

Question

I\'m trying to get a garish red border around some radio buttons, but it is not showing up in Firefox latest or Chrome latest. Work fine in IE9/IE8.

Each of the inp

Answer 1

I know this is four years old, but I came up with a nice solution using CSS Pseudo elements.

My requirement was to highlight an unchecked checkbox, or radio button in validation.

/* 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%;
}