How do I change the color of radio buttons

Question

I mean  a radio button itself consists of a round shape and a dot at the center  when the button is selected   What I want to change is the color of both  Can this be done using CSS

User · Answer

simple cross browser custom radio button example for you

_x000D_

.checkbox input{_x000D_
    display: none;_x000D_
}_x000D_
.checkbox input:checked + label{_x000D_
    color: #16B67F;_x000D_
}_x000D_
.checkbox input:checked + label i{_x000D_
    background-image: url('http://kuzroman.com/images/jswiddler/radio-button.svg');_x000D_
}_x000D_
.checkbox label i{_x000D_
    width: 15px;_x000D_
    height: 15px;_x000D_
    display: inline-block;_x000D_
    background: #fff url('http://kuzroman.com/images/jswiddler/circle.svg') no-repeat 50%;_x000D_
    background-size: 12px;_x000D_
    position: relative;_x000D_
    top: 1px;_x000D_
    left: -2px;_x000D_
}

_x000D_

<div class="checkbox">_x000D_
  <input type="radio" name="sort" value="popularity" id="sort1">_x000D_
  <label for="sort1">_x000D_
        <i></i>_x000D_
        <span>first</span>_x000D_
    </label>_x000D_
_x000D_
  <input type="radio" name="sort" value="price" id="sort2">_x000D_
  <label for="sort2">_x000D_
        <i></i>_x000D_
        <span>second</span>_x000D_
    </label>_x000D_
</div>

_x000D_

https://jsfiddle.net/kuzroman/ae1b34ay/

User · Answer

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

User · Answer

You can embed a span element in the radio input then select a color of your choice to be rendered when a radio input is checked  Check out the example below sourced from w3schools    lt  DOCTYPE html gt   lt html gt   lt style gt     The container     container     display  block    position  relative    padding-left  35px    margin-bottom  12px    cursor  pointer    font-size  22px    -webkit-user-select  none    -moz-user-select  none    -ms-user-select  none    user-select  none        Hide the browser s default radio button     container input     position  absolute    opacity  0    cursor  pointer        Create a custom radio button     checkmark     position  absolute    top  0    left  0    height  25px    width  25px    background-color   eee    border-radius  50         On mouse-over  add a grey background color     container hover input    checkmark     background-color   ccc        When the radio button is checked  add a blue background     container input checked    checkmark     background-color   00a80e        Create the indicator  the dot circle - hidden when not checked      checkmark after     content        position  absolute    display  none        Show the indicator  dot circle  when checked     container input checked    checkmark after     display  block        Style the indicator  dot circle      container  checkmark after       top  9px      left  9px      width  8px      height  8px      border-radius  50       background  white     lt  style gt   lt body gt    lt h1 gt Custom Radio Buttons lt  h1 gt   lt label class  container  gt One    lt input type  radio  checked  checked  name  radio  gt     lt span class  checkmark  gt  lt  span gt   lt  label gt   lt label class  container  gt Two    lt input type  radio  name  radio  gt     lt span class  checkmark  gt  lt  span gt   lt  label gt   lt label class  container  gt Three    lt input type  radio  name  radio  gt     lt span class  checkmark  gt  lt  span gt   lt  label gt   lt label class  container  gt Four    lt input type  radio  name  radio  gt     lt span class  checkmark  gt  lt  span gt   lt  label gt    lt  body gt      Changing the background color at this code segment below does the trick      When the radio button is checked  add a blue background     container input checked    checkmark     background-color   00a80e      Sourced from how to create a custom radio button

User · Answer

Only if you are targeting webkit-based browsers  Chrome and Safari  maybe you are developing a Chrome WebApp  who knows      you can use the following   input type  radio        -webkit-appearance  none      And then style it as if it were a simple HTML element  for example applying a background image   Use input type  radio   active for when the input is selected  to provide the alternate graphics  Update  As of 2018 you can add the following to support multiple browser vendors   input type  radio       -webkit-appearance  none    -moz-appearance  none    appearance  none

User · Answer

I builded another fork of  klewis  code sample to demonstrate some playing with pure css and gradients by using  before  after pseudo elements and a hidden radio input button     HTML   sample radio buttons   lt div style  background lightgrey   gt       lt span class  radio-item  gt           lt input type  radio  id  ritema  name  ritem  class  true  value  ropt1  checked  checked  gt           lt label for  ritema  gt True lt  label gt       lt  span gt        lt span class  radio-item  gt           lt input type  radio  id  ritemb  name  ritem  class  false  value  ropt2  gt           lt label for  ritemb  gt False lt  label gt       lt  span gt   lt  div gt       CSS    radio-item input type  radio         visibility  hidden      width  20px      height  20px      margin  0 5px 0 5px      padding  0         radio-item input type radio  before           position  relative          margin  4px -25px -4px 0          display  inline-block          visibility  visible          width  20px          height  20px          border-radius  10px          border  2px inset rgba 150 150 150 0 75           background  radial-gradient ellipse at top left  rgb 255 255 255  0   rgb 250 250 250  5   rgb 230 230 230  95   rgb 225 225 225  100            content                     radio-item input type radio  checked after               position  relative              top  0              left  9px              display  inline-block              visibility  visible              border-radius  6px              width  12px              height  12px              background  radial-gradient ellipse at top left  rgb 245 255 200  0   rgb 225 250 100  5   rgb 75 175 0  95   rgb 25 100 0  100                content                             radio-item input type radio  true checked after                   background  radial-gradient ellipse at top left  rgb 245 255 200  0   rgb 225 250 100  5   rgb 75 175 0  95   rgb 25 100 0  100                               radio-item input type radio  false checked after                   background  radial-gradient ellipse at top left  rgb 255 225 200  0   rgb 250 200 150  5   rgb 200 25 0  95   rgb 100 25 0  100                   radio-item label       display  inline-block      height  25px      line-height  25px      margin  0      padding  0      preview  https   www codeply com p y47T4ylfib

User · Answer

Try this css with transition     Demo   DarkBrown   292321    Orange   CC3300   div     margin 0 0 0 75em 0     input type  radio         display none    input type  radio     label       color   DarkBrown      font-family Arial  sans-serif      font-size 14px    input type  radio     label span       display inline-block      width 19px      height 19px      margin -1px 4px 0 0      vertical-align middle      cursor pointer      -moz-border-radius   50       border-radius   50      input type  radio     label span        background-color  DarkBrown     input type  radio   checked   label span       background-color  Orange     input type  radio     label span  input type  radio   checked   label span     -webkit-transition background-color 0 4s linear    -o-transition background-color 0 4s linear    -moz-transition background-color 0 4s linear    transition background-color 0 4s linear      Html     lt div gt     lt input type  radio  id  radio01  name  radio    gt     lt label for  radio01  gt  lt span gt  lt  span gt Radio Button 1 lt  label gt   lt  div gt    lt div gt    lt input type  radio  id  radio02  name  radio    gt    lt label for  radio02  gt  lt span gt  lt  span gt Radio Button 2 lt  label gt   lt  div gt

User · Answer

It may be helpful to bind radio-button to styled label  Futher details in this answer

User · Answer

A simple fix would be to use the following CSS property     input type radio  checked      background    colour        border-radius  15px      border  4px solid  dfdfdf

User · Answer

A quick fix would be to overlay the radio button input style using  after  however it s probably a better practice to create your own custom toolkit    x000D   x000D      input type  radio   after   x000D          width  15px  x000D          height  15px  x000D          border-radius  15px  x000D          top  -2px  x000D          left  -1px  x000D          position  relative  x000D          background-color   d1d3d1  x000D          content      x000D          display  inline-block  x000D          visibility  visible  x000D          border  2px solid white  x000D        x000D   x000D      input type  radio   checked after   x000D          width  15px  x000D          height  15px  x000D          border-radius  15px  x000D          top  -2px  x000D          left  -1px  x000D          position  relative  x000D          background-color   ffa500  x000D          content      x000D          display  inline-block  x000D          visibility  visible  x000D          border  2px solid white  x000D        x000D   lt input type  radio  name  gender   gt  x000D   lt input type  radio  name  gender   gt  x000D   x000D   x000D

User · Answer

You can achieve customized radio buttons in two pure CSS ways  Via removing standard appearance using CSS appearance and applying custom appearance  Unfortunately this was doesn t work in IE for Desktop  but works in IE for Windows Phone   Demo   x000D   x000D  input type  radio          remove standard background appearance      -webkit-appearance  none    -moz-appearance  none    appearance  none       create custom radiobutton appearance      display  inline-block    width  25px    height  25px    padding  6px       background-color only for content      background-clip  content-box    border  2px solid  bbbbbb    background-color   e7e6e7    border-radius  50         appearance for checked radiobutton    input type  radio   checked     background-color   93e026        optional styles  I m using this for centering radiobuttons     flex     display  flex    align-items  center    x000D   lt div class  flex  gt     lt input type  radio  name  radio  id  radio1    gt     lt label for  radio1  gt RadioButton1 lt  label gt   lt  div gt   lt div class  flex  gt     lt input type  radio  name  radio  id  radio2    gt     lt label for  radio2  gt RadioButton2 lt  label gt   lt  div gt   lt div class  flex  gt     lt input type  radio  name  radio  id  radio3    gt     lt label for  radio3  gt RadioButton3 lt  label gt   lt  div gt  x000D   x000D   x000D    Via hiding radiobutton and setting custom radiobutton appearance to label s pseudoselector  By the way no need for absolute positioning here  I see absolute positioning in most demos   Demo   x000D   x000D       before    after     box-sizing  border-box     input type  radio       display  none     input type  radio   label before     content           create custom radiobutton appearance      display  inline-block    width  25px    height  25px    padding  6px    margin-right  3px       background-color only for content      background-clip  content-box    border  2px solid  bbbbbb    background-color   e7e6e7    border-radius  50         appearance for checked radiobutton    input type  radio   checked   label before     background-color   93e026        optional styles  I m using this for centering radiobuttons    label     display  flex    align-items  center    x000D   lt input type  radio  name  radio  id  radio1    gt   lt label for  radio1  gt RadioButton1 lt  label gt   lt input type  radio  name  radio  id  radio2    gt   lt label for  radio2  gt RadioButton2 lt  label gt   lt input type  radio  name  radio  id  radio3    gt   lt label for  radio3  gt RadioButton3 lt  label gt  x000D   x000D   x000D

User · Answer

As other said  there s no way to achieve this in all browser  so best way of doing so crossbrowser is using javascript unobtrusively  Basically you have to turn your radiobutton into links  fully customizable via CSS   each click on link will be bound to the related radiobox  toggling his state and all the others

User · Answer

Well to create extra elements we can use  after   before  so we don   t have to change the HTML that much   Then for radio buttons and checkboxes we can use  checked  There are a few other pseudo elements we can use as well  such as  hover   Using a mixture of these we can create some pretty cool custom forms  check this

User · Answer

you can use the checkbox hack as explained in css tricks  http   css-tricks com the-checkbox-hack   working example of radio button   http   codepen io Angelata pen Eypnq  input type radio  checked    check    input type radio  checked    check  inside     Works in IE9   Firefox 3 5   Safari 1 3   Opera 6   Chrome anything

User · Answer

As Fred mentioned  there is no way to natively style radio buttons in regards to color  size  etcc   But you can use CSS Pseudo elements to setup an impostor of any given radio button  and style it  Touching on what JamieD said  on how we can use the  after Pseudo element  you can use both  before and  after to achieve a desirable look   Benefits of this approach    Style your radio button and also Include a label for content  Change the outer rim color and or checked circle to any color you like  Give it a transparent look with modifications to background color property and or optional use of the opacity property  Scale the size of your radio button  Add various drop shadow properties such as CSS drop shadow inset where needed  Blend this simple CSS HTML trick into various Grid systems  such as Bootstrap 3 3 6  so it matches the rest of your Bootstrap components visually    Explanation of short demo below    Set up a relative in-line block for each radio button Hide the native radio button sense there is no way to style it directly  Style and align the label Rebuilding CSS content on the  before Pseudo-element to do 2 things -  style the outer rim of the radio button and set element to appear first  left of label content    You can learn basic steps on Pseudo-elements here - http   www w3schools com css css pseudo elements asp If the radio button is checked  request for label to display CSS content  the styled dot in the radio button  afterwards    The HTML   lt div class  radio-item  gt       lt input type  radio  id  ritema  name  ritem  value  ropt1  gt       lt label for  ritema  gt Option 1 lt  label gt   lt  div gt    lt div class  radio-item  gt       lt input type  radio  id  ritemb  name  ritem  value  ropt2  gt       lt label for  ritemb  gt Option 2 lt  label gt   lt  div gt    The 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   666    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  004c97    background-color  transparent      radio-item input type radio  checked   label after     border-radius  11px    width  12px    height  12px    position  absolute    top  9px    left  10px    content         display  block    background   004c97      A short demo to see it in action  In conclusion  no JavaScript  images or batteries required   Pure CSS

User · Answer

A clever way to do it would be to create a separate div with a height and width of -for example- 50px and then a radius of 50px lay this over your radio buttons

User · Answer

This is not possible by native CSS  You ll have to use background images and some javascript tricks

[html] How do I change the color of radio buttons?

Examples related to html

Examples related to css

Examples related to forms

Examples related to radio-button