Styling Input Radio with CSS

Styling input radio with css

Like this

DEMO

CSS

#slideselector {
    position: absolue;
    top:0;
    left:0;
    border: 2px solid black;
    padding-top: 1px;
}
.slidebutton {
    height: 21px;
    margin: 2px;
}
#slideshow { 
    margin: 50px auto; 
    position: relative; 
    width: 240px; 
    height: 240px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px;
    overflow:hidden;
}

.imgLike {
    width:100%;
    height:100%;
}
/* Radio */

input[type="radio"] {
    background-color: #ddd;
    background-image: -webkit-linear-gradient(0deg, transparent 20%, hsla(0,0%,100%,.7), transparent 80%),
                      -webkit-linear-gradient(90deg, transparent 20%, hsla(0,0%,100%,.7), transparent 80%);
    border-radius: 10px;
    box-shadow: inset 0 1px 1px hsla(0,0%,100%,.8),
                0 0 0 1px hsla(0,0%,0%,.6),
                0 2px 3px hsla(0,0%,0%,.6),
                0 4px 3px hsla(0,0%,0%,.4),
                0 6px 6px hsla(0,0%,0%,.2),
                0 10px 6px hsla(0,0%,0%,.2);
    cursor: pointer;
    display: inline-block;
    height: 15px;
    margin-right: 15px;
    position: relative;
    width: 15px;
    -webkit-appearance: none;
}
input[type="radio"]:after {
    background-color: #444;
    border-radius: 25px;
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.4),
                0 1px 1px hsla(0,0%,100%,.8);
    content: '';
    display: block;
    height: 7px;
    left: 4px;
    position: relative;
    top: 4px;
    width: 7px;
}
input[type="radio"]:checked:after {
    background-color: #f66;
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.4),
                inset 0 2px 2px hsla(0,0%,100%,.4),
                0 1px 1px hsla(0,0%,100%,.8),
                0 0 2px 2px hsla(0,70%,70%,.4);
}

CSS - How to Style a Selected Radio Buttons Label?

.radio-toolbar input[type="radio"] {  display: none;}
.radio-toolbar label {  display: inline-block;  background-color: #ddd;  padding: 4px 11px;  font-family: Arial;  font-size: 16px;  cursor: pointer;}
.radio-toolbar input[type="radio"]:checked+label {  background-color: #bbb;}

<div class="radio-toolbar">  <input type="radio" id="radio1" name="radios" value="all" checked>  <label for="radio1">All</label>
  <input type="radio" id="radio2" name="radios" value="false">  <label for="radio2">Open</label>
  <input type="radio" id="radio3" name="radios" value="true">  <label for="radio3">Archived</label></div>

Styling input radio buttons

You can't go backwards in css, thats why your code doesn't work

You need to add a span inside the label after your input and you can style it when the radio is checked

see code snippet:

.radio input[type='radio'] {  display: none;  /*removes original button*/}
.radio label:before {  /*styles outer circle*/  content: " ";  display: inline-block;  position: relative;  top: 5px;  margin: 0 5px 0 0;  width: 20px;  height: 20px;  border-radius: 11px;  border: 2px solid orange;  background-color: transparent;}
.radio label {  position: relative;}
.radio label input[type='radio']:checked+span {  /*styles inside circle*/  border-radius: 11px;  width: 12px;  height: 12px;  position: absolute;  top: 1px;  left: 6px;  display: block;  background-color: blue;}

<div class="radio">  <label><input type="radio" name="gender" value="male"> Male<span></span></label>  <label><input type="radio" name="gender" value="female"> Female<span></span></label>  <label><input type="radio" name="gender" value="other"> Other<span></span></label></div>

How to style radio input button (ReactJS)?

You can't change the radio button color directly, You need to build your own and customize it as you want.

or you can use filter with hue-rotate() but it's not supported on Internet Explorer have a look here for more info

Edit
There is a better way to do this as @Servesh Chaturvedi mentioned using accent-color: red;

#one{
  filter: hue-rotate(150deg);
}

#two{
  accent-color:red;
}

 <input type="radio" id="one" name="radio" value="first">
<label for="html">First</label><br>

 <input type="radio" id="two" name="radio" value="second">
<label for="html">Second</label><br>

How to change style of radio and checkbox input

jsBin demo

Custom radio and checkbox using css

This technique uses the label element bound to hidden input elements, that receiving a :checked state will change the apperance of the :before pseudo element:

/* COMMON RADIO AND CHECKBOX STYLES  */input[type=radio],input[type=checkbox]{  /* Hide original inputs */  visibility: hidden;  position: absolute;}input[type=radio] + label:before,input[type=checkbox] + label:before{  height:12px;  width:12px;  margin-right: 2px;  content: " ";  display:inline-block;  vertical-align: baseline;  border:1px solid #777;}input[type=radio]:checked + label:before,input[type=checkbox]:checked + label:before{  background:gold;}
/* CUSTOM RADIO AND CHECKBOX STYLES */input[type=radio] + label:before{  border-radius:50%;}input[type=checkbox] + label:before{  border-radius:2px;}

<input type="radio" name="r" id="r1"><label for="r1">Radio 1</label><input type="radio" name="r" id="r2"><label for="r2">Radio 2</label>
<input type="checkbox" name="c1" id="c1"><label for="c1">Check 1</label><input type="checkbox" name="c2" id="c2"><label for="c2">check 2</label>

How to create different css styles to different input radio boxes?

for different styles, you can either give the two elements two different classes and define style for those classes :

.radio-input1{
   width:20px;
   height:20px;
}

.radio-input2{
   width:10px;
   height:10px;
}

or you can give the two inputs, two different ids and repeat the above code:

#radio1{
   width:20px;
   height:20px;
}


#radio2{
   width:10px;
   height:10px;
}

for classes:

<input class="radio-input1">

for id :

<input id="radio1">

How do I change the color of radio buttons?

A radio button is a native element specific to each OS/browser. There is no way to change its color/style, unless you want to implement custom images or use a custom Javascript library which includes images (e.g. this - cached link)

Styling Input Radio with CSS