CODEWITHSUNDEEP
cssradio-button
Anna
Anna

Reputation: 889

Change border-color of radio button when selected

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!

Upvotes: 7

Views: 60684

Answers (3)

Alexey Kureev
Alexey Kureev

Reputation: 2077

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.

Upvotes: 0

RacoonOnMoon
RacoonOnMoon

Reputation: 1586

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>

Upvotes: 27

sol
sol

Reputation: 22959

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>

Upvotes: 4

Related Questions