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 input element on my form that are required has a data-val-required attribute put in by MVC3. All browsers puts in the red borders just dandy when we have a text or textarea inputs, but am struggling with the radio button. For IE, it works, but other browsers won't put the red border around it.

css:

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

view-source:

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

What it looks like in IE (Firefox and Chrome shows no borders):

Clynes

If you're open to doing the whole label and can stomach not-so-clean markup, here's one way to style them. In this case I want it to be highlighted when required, but you can do the same thing when it's invalidated (class='error' vs [required]). jsfiddle.net/jinglesthula/tsahh2jg – Landahl

Answer 1

You could accomplish by wrapping each input element with div tag and give it a border and a float left... like this:

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

Ethology

Answer 2

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

Peltry

outline is widely used by browsers to indicate focus. If you go with this, you may fail WCAG 2.0 web accessibility Requirement 2.4.7. – Celin

Answer 3

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.

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

Lunn

I like about this approach that it doesn't require any additional HTML elements. – Illnatured

Can also use :indeterminate to highlight them when none in the group are checked – Zwickau

Answer 4

Not all browsers support borders around radio buttons and checkboxes. I voted for a bug years ago to have this included in Gecko but so far they haven't implemented it.

Buatti

appears I may have to wrap it around a bunch of divs or something? where may I vote? ;-) – Clynes

Answer 5

This may help you:

.style {
  border: 1px solid red;
  width: 20px;
  height: 20px;
  text-align: center;
  margin-top: 2px;
  background-color: #f0ffff;
}

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

View on JSFiddle

Glucosuria

Answer 6

Complete code using jquery

https://jsfiddle.net/xcb26Lzx/

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

Anthracite

Answer 7

Try this...

Put a div around the input and assign a class to the div like so:

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

Then open your custom css file and add this CSS

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

This should create a nice red border around the radio button. If you're using a check box you would simply remove the border-radius: 30px from the css. Depending you may need to play with the padding a bit to center the button, but this worked for me.

Edit: You will also want to assign the following CSS to the div so it lines up correctly.

.custom {display: inline;}

fiddle link

Laux