Change CSS Borders to an input type radio checked

Question

I am trying that when a Radio Button is selected, changes its radio to blue color. But I can not. This is my CSS code:

/* Estilo Radio Button */
.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; 
}


.radio-danger input[type="radio"] + label::after {
    background-color: #d9534f; 
}

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

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

.radio-info input[type="radio"] + label::after {
    background-color: #5bc0de; 
}

.radio-info input[type="radio"]:checked + label::before {
    border-color: #5bc0de; 
}

.radio-info input[type="radio"]:checked + label::after {
    background-color: #5bc0de; 
}

.radio-warning input[type="radio"] + label::after {
    background-color: #f0ad4e; 
}

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

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

.radio-success input[type="radio"] + label::after {
    background-color: #5cb85c; 
}

.radio-success input[type="radio"]:checked + label::before {
    border-color: #5cb85c; 
}

.radio-success input[type="radio"]:checked + label::after {
    background-color: #5cb85c; 
}

If I changes this:

.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%;
    //HERE!!!
    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; 
}

Changes all radio buttons borders. I am only what checked radio button. How could I do this?. Thank you.

What's the markup look like? If there are any elements between the input and the label, `+` won't work. You might need a `~` instead, but I can't know for sure unless I can see the markup too. — Joseph Marikle, May 04 '17 at 18:33
Check the links [Link 1](http://stackoverflow.com/questions/4253920/how-do-i-change-the-color-of-radio-buttons) [Link 2](http://www.codeply.com/go/NKtDpPXv2x) [Link 3](https://help.surveygizmo.com/help/icons) — Nimish, May 04 '17 at 18:40
Thank you! @Nimish. This is the solution! Thank you so much. — JuMoGar, May 04 '17 at 18:51

score 1 · Accepted Answer · answered May 04 '17 at 18:50

Based on your CSS and the code Roko put together, I think you just need this new rule. You have rules in place like this, but they only apply to controls with a particular class. !important is needed because your rule for .radio label::before has an !important style for border-color

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

score 0 · Answer 2 · edited May 23 '17 at 11:47

0

You can't change the radio button styling as it is a native browser element.

How do I change the color of radio buttons?

You can try overlaying a psuedo element like you were doing with the label. But just another radio button with a higher z-index

edited May 23 '17 at 11:47

Community

1
1

answered May 04 '17 at 18:31

StefanBob

4,857
2
32
38

So when he says "I am trying that when a Radio Button is selected, changes its radio to blue color." and "I am only what checked radio button." that doesn't mean he is trying to change the radio button? What you posted is him changing the labels, showing he can change that but not the button styles. – StefanBob May 04 '17 at 18:36
Yes... OP was never actually trying to change the radio button border color. It's just worded poorly. Just look at his example. He has "If I changes this:" followed by a rule for `.radio label::before` which includes a style of `border-color: blue !important;`, saying "Changes all radio buttons borders". It's clear OP is just talking about the label border. – Joseph Marikle May 04 '17 at 18:38
No you have it wrong. He says when i do this i can change the label/border. But i can't change the radio button. How do i change the radio button? To which I answered his question. He is just showing an example of how he can style the other parts of the button but not the actual button – StefanBob May 04 '17 at 18:40
If he can clearly change the label border in his example, why would he even post a question about it? – StefanBob May 04 '17 at 18:41
Probably because he's using `+` to associate an `input` and a `label`. The major fault with that method is that the `label` has to be a sibling that follows immediately, in which case, he should be using `~`. That's my guess anyway. I have no idea why it's not working. It's not really easy to tell what's wrong without the markup because for the most part his CSS looks ok. – Joseph Marikle May 04 '17 at 18:44

score 0 · Answer 3 · answered May 04 '17 at 18:42

There's nothing wrong with the code you posted.
If you cannot gt the :checked state to work that only means that you're missing the id="" and label for="" attributes.

_{This demo looks like sh*t but it's your CSS you need to pimp-up}

/* Estilo Radio Button */
.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; 
}


.radio-danger input[type="radio"] + label::after {
    background-color: #d9534f; 
}

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

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

.radio-info input[type="radio"] + label::after {
    background-color: #5bc0de; 
}

.radio-info input[type="radio"]:checked + label::before {
    border-color: #5bc0de; 
}

.radio-info input[type="radio"]:checked + label::after {
    background-color: #5bc0de; 
}

.radio-warning input[type="radio"] + label::after {
    background-color: #f0ad4e; 
}

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

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

.radio-success input[type="radio"] + label::after {
    background-color: #5cb85c; 
}

.radio-success input[type="radio"]:checked + label::before {
    border-color: #5cb85c; 
}

.radio-success input[type="radio"]:checked + label::after {
    background-color: #5cb85c; 
}

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

Take a look at my answer. If you combine mine with yours I'll go ahead and delete mine. — Joseph Marikle, May 04 '17 at 18:50

Change CSS Borders to an input type radio checked

3 Answers3