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

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

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to make just the background image transparent using HTML and CSS?

Hey there! I'm trying to make just the background image transparent, while leaving everything else non-transparent. Is this possible with Bootstrap? Here's a snippet of my HTML: HTML Section: <!-- Homepage Section --> <section id= ...

htmlcsstwitter-bootstrapbackgroundopacity

Proper alignment of content in HTML using Bootstrap following the integration of .json data

After aligning the emergency hotlines properly, I am struggling to position the text under the image to display the data in three rows. I attempted col-4 but encountered issues with JSON. My objective is to show the image followed by the numbers directly b ...

htmlcssjsontwitter-bootstrap

When utilizing the JavaScript createElement() method to create elements on keydown, it will not be compatible with jQuery's draggable() method

I'm currently developing a drag and drop feature for a project, allowing users to add items to a work area and then position them by dragging. I'm facing an issue where I want to create multiple instances of the same element using a key code, but ...

javascripthtmljquerycssjquery-ui-draggable

Is it possible to add a vertical scrollbar to the vertical navigation pills on a Bootstrap

Is it possible to create a vertical scroll bar for my nav pills when they exceed the screen size? /* * * ========================================== * CUSTOM UTIL CLASSES * ========================================== */ .nav-pills-custom .nav-link { c ...

javascripthtmlcssbootstrap-4

Ways to set the minimum width of a div depending on its contents

As I work on my website, I encountered an issue with a div containing a table. The div expands to full width, but when I resize the screen, it shrinks causing the content to overlap. I am looking for a solution where the minimum width of the div adjusts b ...

javascriptjqueryhtmlcss

Personalize the file button for uploading images

I have a button to upload image files and I want to customize it to allow for uploading more than one image file. What is the logic to achieve this? <input type="file" />, which renders a choose button with text that says `no files chosen` in the sa ...

javascriptjquerycsshtml

Customize the size of table cells in Bootstrap to fit the content

I am working on a table with Bootstrap where each cell contains a button element. I am trying to adjust the width of each cell to accommodate the button and margin, but using <td class="col-md-1"> doesn't seem to make any difference. Is there a ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Scroll to the top of jQuery DataTables when clicking pages in a random order from the bottom to the top and

In my current project, I am working with jQuery Datatables and I need to customize its default behavior. Currently, when I navigate to page 61, the page scroll remains at the bottom of the page. However, if I then click on a lower page number like 60, th ...

javascriptjqueryhtmlcssdatatables

Discovering whether a link has been clicked on in a Gmail email can be done by following these steps

I am currently creating an email for a marketing campaign. In this email, there will be a button for users to "save the date" of the upcoming event. I would like to implement a feature that can detect if the email was opened in Gmail after the button is cl ...

javascriptjqueryhtmlcssgmail

Concern with Isotope's masonry feature

I'm at my wit's end! The container div I'm dealing with is 1170px wide. My goal is to fit in 3 divs within this width. The first div is 275px wide, the second is 580px wide, and the third is also 275px wide. Altogether, these divs should ad ...

javascriptjqueryhtmlcssjquery-isotope

Displaying and concealing table rows based on selected items

After spending a whole day trying to get this HTML/java script to work properly, I came across some code online that I used here. My goal is to have the "Colors*" row not displayed when the page loads, but to show the color options when a shirt size is sel ...

javascripthtmlcss

What is the reason behind Chrome's fullscreen mode turning the background black?

I created a webpage with full-screen functionality and made sure to use the correct CSS properties to ensure that my gradient background covers the entire screen perfectly. However, I encountered an issue when clicking the full-screen button in Chrome - th ...

javascripthtmlcssgoogle-chromefullscreen

Guide on how to align multiple divs at the center of a container using CSS

Experimenting with centering a divider in the style of Windows metro. .container { height: 300px; width: 70%; background: #EEE; margin: 10px auto; position: relative; } .block { background: green; height: 100px; width: 10 ...

htmlcss

Having trouble with Vuejs Ternary Operator or Conditional in v-bind-style?

Having some unexpected issues while trying to implement a style conditional for items in Vuejs. I have come across Stack Overflow posts on how to use a ternary, either through an interpolated string or a computed style object. I've attempted both met ...

javascriptcssvue.jsconditional-statementsternary-operator

Try placing the div class above the navbar in Bootstrap

I've created these fork me ribbons in CSS with the intention of placing them on top of the navbar, similar to the Github images. Here is how they currently appear: http://jsbin.com/womib/1 .ribbon { background-color: #F38419; overflow: h ...

htmlcsstwitter-bootstrap

Make the background extend all the way down to the bottom of the page, whether it scrolls or

I am seeking a solution to have the background extend to the bottom of the page, while accommodating both short and long pages. <html> <body> <div id="container">Container of variable height</div> </body> </htm ...

htmlcss

Having difficulty in animating the upward movement of textbox2

I've got a form that contains 2 buttons and 2 textareas. When the form loads, I want to display only section1 (button, textarea) and the section2 button. Upon clicking the section2 button, my aim is to hide the section1 textarea, reveal the section2 t ...

javascripthtmlcsscss-animations

Guide on adjusting image dimensions in JTextPane using HTML and CSS in the Java Swing environment

I am looking to add an image (such as a formula created from LaTeX) into JTextPane, using HTML+CSS for text formatting and manually setting its size. I attempted the following approach: import java.awt.Dimension; import javax.swing.JFrame; import javax.swi ...

javahtmlcssswing

Highlighted text with CSS

For this exercise, I was provided with the following HTML code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Selected text</title> </head> <body> <div class ...

csscss-selectorsselection

What is the code to create a forward slash on a webpage using HTML/CSS?

I want to create a unique parallelogram/slash design on my website. While it's simple to place two rectangles side by side, achieving the slash effect is proving to be quite challenging. Can this be done using only CSS or HTML, or does it require SVGs ...

htmlcss