Is there any way to change the RadioBox color using CSS?

Question

I used a radio button in my simple project. The radio button looks good with a blue color background when selected. But while running the same code using Edge and Firefox, the background color is black.

I heard that the radio button style is Browser specific. Is this true?

And is there any possibility to change the style without custom radio buttons?

If a custom radio button is the only option, then how do you render it the same as in Google Chrome?

Radio Button visible in Chrome

Radio Button visible in Firefox and Edge

Answer 1

I recreated the chrome radio button with custom css and added a blue background instead of gray. It shows up the same on chrome, firefox, and edge. You might want to do some tweaking of the css to fit your size needs though.

Here is the code

HTML

div class="radio-item">
    <input type="radio" id="ritema" name="ritem" value="ropt1">
    <label for="ritema">Option 1</label>
</div>

<div class="radio-item">
    <input type="radio" id="ritemb" name="ritem" value="ropt2">
    <label for="ritemb">Option 2</label>
</div>

CSS

.radio-item {
  display: inline-block;
  position: relative;
  padding: 0 6px;
  margin: 10px 0 0;
}

.radio-item input[type='radio'] {
  display: none;
}

.radio-item label {
  color: black;
  font-weight: normal;
}

.radio-item label:before {
  content: " ";
  display: inline-block;
  position: relative;
  top: 5px;
  margin: 0 5px 0 0;
  width: 20px;
  height: 20px;
  border-radius: 11px;
  border: 2px solid gray;
  background-color: transparent;
}

.radio-item input[type=radio]:checked + label:after {
  border-radius: 11px;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 11px;
  left: 12px;
  content: " ";
  display: block;  
  background: blue;
  background-color: blue;
  
 
  
}