Modify the CSS borders to reflect a selected radio input type

I'm attempting to change the color of a Radio Button to blue when it's selected, but I'm having trouble achieving this. Here is the CSS code I'm using:

/* Radio Button Style */
.radio {
    padding-left: 25px; 
}

.radio label {
    display: inline-block;
    position: relative;
    padding-left: 0px;
}

.radio label::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 17px;
    height: 17px;
    left: 0;
    margin-left: -20px;
    border: 1px solid #cccccc;
    border-radius: 50%;
    border-color: #ddd !important;
    outline: 0 !important;
    background-color: #fff;
    -webkit-transition: border 0.15s ease-in-out;
    -o-transition: border 0.15s ease-in-out;
    transition: border 0.15s ease-in-out; 
}

.radio label:hover:before {
    border-color: rgba(82, 168, 236, 0.8) !important;
    outline: 0 !important;
    outline: thin dotted \9 !important;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6) !important;
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6) !important;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6) !important;
}

.radio label::after {
    display: inline-block;
    position: absolute;
    content: " ";
    width: 11px;
    height: 11px;
    left: 3px;
    top: 3px;
    margin-left: -20px;
    border-radius: 50%;
    background-color: #555555;
    -webkit-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -o-transform: scale(0, 0);
    transform: scale(0, 0);
    -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
    -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
    -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
    transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); 
}

.radio input[type="radio"] {
    opacity: 0; 
}

.radio input[type="radio"]:focus + label::before {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px; 
}

.radio input[type="radio"]:checked + label::after {
    -webkit-transform: scale(0.75, 0.75);
    -ms-transform: scale(0.75, 0.75);
    -o-transform: scale(0.75, 0.75);
    transform: scale(0.75, 0.75);
}

.radio input[type="radio"]:disabled + label {
    opacity: 0.65; 
}

.radio input[type="radio"]:disabled + label::before {
    cursor: not-allowed; 
}

.radio.radio-inline {
    margin-top: 0; 
}

.radio-primary input[type="radio"] + label::after {
    background-color: #428bca; 
}

.radio-primary input[type="radio"]:checked + label::before {
    border-color: #428bca; 
}

.radio-primary input[type="radio"]:checked + label::after {
    background-color: #428bca; 
}

/* Change to Blue Color */
.radio label::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 17px;
    height: 17px;
    left: 0;
    margin-left: -20px;
    border: 1px solid #cccccc;
    border-radius: 50%;
    border-color: blue !important;
    outline: 0 !important;
    background-color: blue;
    -webkit-transition: border 0.15s ease-in-out;
    -o-transition: border 0.15s ease-in-out;
    transition: border 0.15s ease-in-out; 
}

By making changes in the code as shown above, all the radio buttons will have a blue border. If you want only the checked radio button to change to blue, you would need to modify the code differently. Thank you.

css

Answer №1

After reviewing your CSS and the code provided by Roko, it appears that adding this new rule may solve your issue. Currently, your existing rules only affect controls with a specific class. Adding !important is necessary because the .radio label::before rule includes an !important style for border-color.

.radio input[type="radio"]:checked + label::before {
    border-color: blue !important;
}

Answer №2

Unfortunately, the styling of radio buttons cannot be altered since they are built-in elements of the web browser.

For guidance on changing the appearance of radio buttons, visit this helpful resource: How do I change the color of radio buttons?

One potential workaround suggested is overlaying a pseudo element, similar to what was done with the label, but with a new radio button set to a higher z-index.

Answer №3

There's nothing wrong with the code you provided.
If you're having trouble getting the :checked state to work, it could be because you forgot to include the id="" and for="" attributes in the label tag.

This demonstration may not look great, but it's your CSS that needs some improvement

/* Styling for Radio Buttons */
.radio {
    padding-left: 25px; 
}

.radio label {
    display: inline-block;
    position: relative;
    padding-left: 0px;
}

.radio label::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 17px;
    height: 17px;
    left: 0;
    margin-left: -20px;
    border: 1px solid #cccccc;
    border-radius: 50%;
    border-color: #ddd !important;
    outline: 0 !important;
    background-color: #fff;
    -webkit-transition: border 0.15s ease-in-out;
    -o-transition: border 0.15s ease-in-out;
    transition: border 0.15s ease-in-out; 
}

.radio label:hover:before {
    border-color: rgba(82, 168, 236, 0.8) !important;
    outline: 0 !important;
    outline: thin dotted \9 !important;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6) !important;
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6) !important;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6) !important;
}

.radio label::after {
    display: inline-block;
    position: absolute;
    content: " ";
    width: 11px;
    height: 11px;
    left: 3px;
    top: 3px;
    margin-left: -20px;
    border-radius: 50%;
    background-color: #555555;
    -webkit-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -o-transform: scale(0, 0);
    transform: scale(0, 0);
    -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
    -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
    -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
    transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); 
}

/* More CSS code for radio buttons... */


<span class="radio">
  <input type="radio" id="r1" name="r">
  <label for="r1"></label>
</span>

<span class="radio">
  <input type="radio" id="r2" name="r">
  <label for="r2"></label>
</span>

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

How to effortlessly bring modal windows onto the page from either side

I'm looking to have two hidden modal windows that can slide in from the left and right edges of the page. In my current setup, the left modal slides in from the right instead of sliding out from the left margin as desired. You can view the issue in th ...

csstwitter-bootstrapbootstrap-4

Is it possible to access an external website by clicking on a link within a DIV element?

I have a basic website set up like this sample.php <html> <head></head> <body> <a id="myLink" href="http://sample.com">Click!</a> </body> </html> I displayed this website within a DIV-Container on a ...

javascriptphpjqueryhtmlcss

Error 404 occurs when images are not able to load when stored in a different directory

When I encounter a custom 404 Error on my website at http://ericmuir.tk and it happens in a directory other than the home one, none of the images on the page load. I faced a similar issue with loading CSS scripts, but resolved it by using style tags which ...

htmlcsswebhttp-status-code-404

Exploring the functionality of v-chips within a v-text-field

I am trying to implement a search text field using vuetify's v-text-field, and I want to display the user input in a chip (such as v-chip or v-combo-box). However, v-text-field does not seem to support chips based on the documentation. Is there a work ...

cssvue.jsvuetify.js

List organized in two columns utilizing the data-* attribute

Is it possible to display a list in a two-column format based on a data attribute of each item? <ul> <li data-list="general_results">general text1</li> <li data-list="general_results">general text2</li> <li dat ...

htmlcss

Looking to implement a CSS banner image for seamless customization across multiple pages

Is it possible to change the banner image easily in the CSS without having to update every HTML page? I don't want the image source to be directly on the HTML pages. How can this be achieved? Additionally, there are already two references in the CSS: ...

htmlcss

Expanding the input focus to include the icon, allowing it to be clicked

Having trouble with my date picker component (v-date-picker) where I can't seem to get the icon, a Font Awesome Icon separate from the date-picker, to open the calendar on focus when clicked. I've attempted some solutions mentioned in this resour ...

csshtmlvue.jssass

Replicate the ctrl+/- function through coding

While browsing with your browser, you have the ability to adjust the font size by using CTRL + + or CTRL + -. Is there a way to replicate this functionality through code, such as with JavaScript? I am looking to add buttons on my website that allow users ...

javascriptcss

Modifying Copyright Feature in Footer

I am attempting to implement this function within my dark-colored footer: import Typography from '@material-ui/core/Typography'; function Copyright() { return ( <Typography variant="body2" color="textSecondary" align="center"> ...

javascripthtmlcssreactjsmaterial-ui

Update the icon using CSS style properties

I have been using liqour-tree and I need to change the arrow icon to a custom one. Unfortunately, I am not sure how to do this. Can someone please help me out? I have identified the element tag where the icon is placed. <i class="tree-arrow expanded ha ...

cssvue.jstreevue-component

A guide to building a dynamic form slider that showcases variable output fields with Javascript

I'm interested in creating a Slider Form that shows different output fields when sliding, using Javascript. Something like this: https://i.sstatic.net/3Isl4.png Could anyone provide suggestions on how to achieve this or share any links related to so ...

javascripthtmljquerycss

When using Owl Carousel in Chrome, the carousel unexpectedly stops after switching tabs

Hi there, I'm currently testing out the auto play feature in owl carousel. One issue I've encountered is that when I switch to another tab in Chrome and then return to my webpage with the carousel, it stops functioning unless I manually drag the ...

javascriptjqueryhtmlcssowl-carousel

Setting a uniform width for all columns in a table using ReactJS

When working with variable amounts of data displayed as columns in a table, I struggled to maintain fixed widths for each column. Despite my efforts, the columns would stretch based on available space rather than obeying the specified widths. For example, ...

cssreactjshtml-tableflexboxmaterial-ui

Incorrect synchronization in the SVG arrow animation

How come the arrow doesn't start moving at the same time as the line? Is there a synchronization issue? I want the arrow to begin its journey simultaneously with the line. .container{ width:100%; padding:0px; background-color: black; } .squig ...

htmlcsssvg-animate

Easiest method to change cursor to 'wait' and then return all elements to their original state

On my website, there are certain CSS classes that define a specific cursor style when hovered over. I am trying to implement a feature where the cursor changes to a "wait" image whenever an AJAX call is initiated on any part of the page, and then reverts b ...

javascriptjquerycss

What steps can I take to ensure my header image adjusts properly for different screen sizes?

Currently, I am working on creating a website for a friend using an exquisite premium Wordpress theme. Despite having paid for the theme, the designer is unwilling to assist with customization. You can view the site in progress at www.zerocarbonfood.co.uk ...

csswordpressresponsive-design

Building a nested table within a parent table in bootstrap is a breeze

Can you provide guidance on nesting tables in Bootstrap-3? Whenever I attempt it, the second table ends up being displayed after the first one. ...

csstwitter-bootstrap-3

Resize drop zone with drag and drop functionality

I am using jQuery for dragging and dropping elements, but I am facing an issue. When I resize the drop zone while starting to drag an item, it seems like the previous size of the drop zone is still being used as the space. Is there a way to fix this? ...

javascriptjqueryhtmlcssdrag-and-drop

What are some ways to enable text highlighting when it is disabled?

I've encountered an issue with text highlighting in my asp.net web application when using the latest versions of FireFox and Google Chrome. Strangely, pressing CTRL+A also does not work for all input fields. I haven't had the opportunity to test ...

csscross-browserhighlighttextselection

Tips on implementing vertical-align within an inline-table

Can someone help me with vertically centering text inside links without losing the 100% height of "a" elements? I've tried to tackle this issue without success, and I am using Twitter Bootstrap 3. Any suggestions would be greatly appreciated. ...

htmlcss