Is it possible to change the color of selected radio button's center circle

Question

Is it possible to style the center circle of a selected radio button, at least in webkit browsers…?

What I have now:

What I want:

I can change the background color, shadow etc as follows

#searchPopup input[type="radio"]{
  -webkit-appearance:none;
  box-shadow: inset 1px 1px 1px #000000;
  background:#fff;
}

#searchPopup input[type="radio"]:checked{
  -webkit-appearance:radio;
  box-shadow: none;
  background:rgb(252,252,252);
}

Any ideas..?

Bawdyhouse

Answer 1

You can mimic the radio button using some round border trick (to render the outer circle) and the pseudo-element :before (to render the inner circle) which can fortunately be used on an input field of radio type:

input[type='radio'] {
  -webkit-appearance:none;
  width:20px;
  height:20px;
  border:1px solid darkgray;
  border-radius:50%;
  outline:none;
  box-shadow:0 0 5px 0px gray inset;
}

input[type='radio']:hover {
  box-shadow:0 0 5px 0px orange inset;
}

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

Working Demo.

Breton

This is not working in Internet Explorer (IE) , can you please give me suggestion how it'll works in IE. – Lasser

@user3577774 the OP asked for a simple solution working in Webkit-based browsers (at least so). A cross-browser solution is more complex. I made a demo like that. This is nearly perfect, you can see it here jsfiddle.net/viphalongpro/sVFU3 – Breton

Add -moz-appearance as well to make it compatible with Firefox – Albinaalbinism

Answer 2

You can bind radio-button to label, than you can hide radio-button and style label whatever you like. Example.

div {
    background-color: #444444;
    display: flex-column;
    display:webkit-flex-column;
}
input {
    margin: 10px;
    position: absolute;
    left: 100px;
}
label {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    margin: 10px;
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    background-color: #ffffff;
    box-shadow: inset 1px 0 #000000;
}
#green {
   border: 8px solid green;
}
#red {
    border: 8px solid red;
}
input:checked + #green {
    border: 8px solid #ffffff;
    background-color:green !important;
}
input:checked + #red {
    border: 8px solid #ffffff;
    background-color: red !important;
}

Click a button on the left - radio button on the right will be checked.
<div>
    <input id="greenInput" type="radio" name="someName">
    <label id="green" for="greenInput"> </label>
    <input id="redInput" type="radio" name="someName">
    <label id="red" for="redInput"></label>
 </div>

Mcdougall

Not entirely sure why this answer has been ignored? best and most useful answer supplied and also most cross browser friendly idea! – Strep

Long time ago, but I agree with Andrew. This seems to be the best overall option for function and compatibility. – Eustashe

Answer 3

You could also apply a background-image when the radio button is checked

[type="radio"]:checked {
    width: 16px;
    height: 16px;
    -webkit-appearance: none;
    background-image:  ...
}

An example: http://jsfiddle.net/yZ6tM/

Desmond

This is not working in Internet Explorer (IE) , can you please give me suggestion how it'll works in IE. – Lasser

this is a solution but a pretty expensive one... css is much prettier and efficient for most cases. – Unfledged

Answer 4

this is very easy to change radio button color. I tried my best and I finally I find a simple css style to change selected radio button color. I am changing it to red color. use your color to place of red.

css

 accent-color: red;

example

 <input type="radio" name="Example" value="Example" style=" accent-color: red;" />

this is best way to change radio button color without a big effort. I hope everyone like it.

Complicate