Change border-color of radio button when selected

Question

I want to have a green radio button surrounded with a green border when I select it.
This is what I have:

input[type='radio'] {
        -webkit-appearance: none;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        outline: none;
        box-shadow: 0 0 0 2px gray;
    }

    input[type='radio']:before {
        content: '';
        display: block;
        width: 60%;
        height: 60%;
        margin: 20% auto;
        border-radius: 50%;
    }

    input[type='radio']:checked:before {
        background: green;
    }

    .role {
        margin-right: 80px;
        margin-left: 20px;
        font-weight: normal;
    }

    .checkbox label {
        margin-bottom: 20px !important;
    }

    .roles {
        margin-bottom: 40px;
    }

And the template:

<div class="roles">
    <input type="radio" name="role" value="ONE" id="one">
    <label class="role" for="one">ONE</label>
    <input type="radio" name="role" value="TWO" id="two">
    <label class="role" for="two">TWO</label>
</div>

Here is a Jsfiddle: Demo

Like you can see the border-color never changes to green... I tried to add border-color property to no avail... How can I do it?

Thanks!

Elo

You may find an explanation here :) #4254420 – Besnard

This: #10850126 – Usherette

Possible duplicate of Border around label if radio is checked – Rite

Answer 1

You need to check your css. The border you got is created by box-shadow and not by a border:

here is a fiddle that is working. Have Fun

input[type='radio'] {
        -webkit-appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        outline: none;
        border: 3px solid gray;
    }

    input[type='radio']:before {
        content: '';
        display: block;
        width: 60%;
        height: 60%;
        margin: 20% auto;
        border-radius: 50%;
    }

 input[type="radio"]:checked:before {
        background: green;
        
    }
    
    input[type="radio"]:checked {
      border-color:green;
    }

    .role {
        margin-right: 80px;
        margin-left: 20px;
        font-weight: normal;
    }

    .checkbox label {
        margin-bottom: 20px !important;
    }

    .roles {
        margin-bottom: 40px;
    }

<div class="roles">
    <input type="radio" name="role" value="ONE" id="one">
    <label class="role" for="one">ONE</label>
    <input type="radio" name="role" value="TWO" id="two">
    <label class="role" for="two">TWO</label>
</div>

Iotacism

No problem :) :) – Iotacism

Answer 2

You could just update the box-shadow color:

input[type='radio'] {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  outline: none;
  box-shadow: 0 0 0 2px gray;
}

input[type='radio']:checked {
  box-shadow: 0 0 0 2px green;
}

input[type='radio']:before {
  content: '';
  display: block;
  width: 60%;
  height: 60%;
  margin: 20% auto;
  border-radius: 50%;
}

input[type='radio']:checked:before {
  background: green;
}

.role {
  margin-right: 80px;
  margin-left: 20px;
  font-weight: normal;
}

.checkbox label {
  margin-bottom: 20px !important;
}

.roles {
  margin-bottom: 40px;
}

<div class="roles">
  <input type="radio" name="role" value="ONE" id="one">
  <label class="role" for="one">ONE</label>
  <input type="radio" name="role" value="TWO" id="two">
  <label class="role" for="two">TWO</label>
</div>

Cottony

Exactly, I misunderstood how works box-shadow. Thanks! – Elo

Answer 3

While the answers above are correct, there is the easier way of achieving the same behaviour using CSS appearance: none attribute.

For example, if you'd like to change border-color, you can achieve it by using following combination:

.radio {
  appearance: none;
  border-color: red;
}

Mind, that MDN docs says:

Note: If you wish to use this property on websites, you should test it very carefully. Although it is supported in most modern browsers, its implementation varies. In older browsers, even the keyword none does not have the same effect on all form elements across different browsers, and some do not support it at all. The differences are smaller in the newest browsers.

So while it is a very useful property to have for your custom radio buttons (and other standard UI elements which are controlled by the system UI by default), it should be thoroughly tested before pushing it to prod.

Buoyage