Styling radio buttons with customized CSS borders

Question

Styling radio buttons with customized CSS borders

I'm attempting to style some radio buttons with a bold red border, but I'm having trouble getting it to display correctly in the latest versions of Firefox and Chrome. It works fine in IE9/IE8.

For each input element that is required on my form, MVC3 adds a data-val-required attribute. While all browsers apply the red border smoothly for text or textarea inputs, I'm facing issues with the radio buttons. It seems to work in IE, but other browsers do not show the red border around them.

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>

While IE displays the red borders as intended, Firefox and Chrome do not show any borders:

css

Answer 1

Answer №1

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

Answer 2

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

Answer 3

Answer №2

Although this post is from four years ago, I wanted to share a creative solution that involves utilizing CSS Pseudo elements.

I was faced with the task of highlighting an unchecked checkbox or radio button during validation.

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

/* To highlight unchecked radio buttons and checkboxes with the .required class */
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;
}
/* Give radio buttons a round shape by adding a 100% border radius */
input[type=radio].required::after {
     border-radius: 100%;
}

Answer 4

Although this post is from four years ago, I wanted to share a creative solution that involves utilizing CSS Pseudo elements.

I was faced with the task of highlighting an unchecked checkbox or radio button during validation.

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

/* To highlight unchecked radio buttons and checkboxes with the .required class */
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;
}
/* Give radio buttons a round shape by adding a 100% border radius */
input[type=radio].required::after {
     border-radius: 100%;
}

Answer 5

Answer №3

To achieve this, you can enclose each input element in a div tag and apply a border and a float left style like so:

<div style="border:1px solid red;float:left">
   <input type="radio".. />
</div>
No, I will not disclose confidential information

Answer 6

To achieve this, you can enclose each input element in a div tag and apply a border and a float left style like so:

<div style="border:1px solid red;float:left">
   <input type="radio".. />
</div>
No, I will not disclose confidential information

Answer 7

Answer №4

Unfortunately, not all web browsers are capable of displaying borders around radio buttons and checkboxes. I submitted a bug report requesting this feature be added to the Gecko engine some time ago, but it has yet to be implemented.

Answer 8

Unfortunately, not all web browsers are capable of displaying borders around radio buttons and checkboxes. I submitted a bug report requesting this feature be added to the Gecko engine some time ago, but it has yet to be implemented.

Answer 9

Answer №5

If you're looking for a solution, consider this:

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

Check it out on JSFiddle

Answer 10

If you're looking for a solution, consider this:

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

Check it out on JSFiddle

Answer 11

Answer №6

Here is a jQuery code snippet for you to try out:

Check it out on jsFiddle

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

Answer 12

Here is a jQuery code snippet for you to try out:

Check it out on jsFiddle

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

Answer 13

Answer №7

Give this a try...

Wrap the input in a div element and give the div a custom class like this:

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

Next, open your custom CSS file and add the following styles:

.styled {border: 1px solid blue; border-radius: 20px; padding: 5px; background: blue;}

These CSS rules will add a stylish blue border around the radio button. For checkboxes, simply remove the border-radius property. You may need to adjust the padding for centering the button, but this worked well for me.

Note: Add this additional CSS rule to ensure proper alignment of the styled elements:

.styled {display: inline-block;}

Check out the demo here

Answer 14

Give this a try...

Wrap the input in a div element and give the div a custom class like this:

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

Next, open your custom CSS file and add the following styles:

.styled {border: 1px solid blue; border-radius: 20px; padding: 5px; background: blue;}

These CSS rules will add a stylish blue border around the radio button. For checkboxes, simply remove the border-radius property. You may need to adjust the padding for centering the button, but this worked well for me.

Note: Add this additional CSS rule to ensure proper alignment of the styled elements:

.styled {display: inline-block;}

Check out the demo here

Styling radio buttons with customized CSS borders

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

How can I turn off the animation for a q-select (quasar select input)?

Using a <div> to contain <mat-card> in Angular Material

Ionic 4 Tabs with Smooth Scrolling

How can you determine the specific type of "display" utilized by CSS Bootstrap for a particular element?

Update to the viewport meta tag in iOS 7

What are the steps to customize the appearance of a ComboBox using CSS?

Using an icon font as a background in CSS attribute

How can you adjust the dimensions of a child div?

Bring back object categories when pressing the previous button on Firefox

Establish a timeout period for ajax requests using jQuery

Creating an object positioned to the right side of a div (div:right) is a matter of using CSS positioning properties

Rotate the circular border in a clockwise direction when clicked

AngularJS | Using ngAnimate to Display Form Validation Errors

CSS - Implementing responsive design to ensure optimal viewing experience on all devices

Do you require assistance with creating an image slideshow?

What are some ways to style CSS for links, such as a login button?

Mysterious issue with loading images in HTML and PHP

Doesn't seem like jQuery's .blur() is responsive on dynamically created fields

Turn off the automatic resizing of Internet Explorer 11 to fit the width of the viewport - IE11

As the browser window is resized, the gap between images widens while the images themselves decrease