How to make a radio button look like a toggle button

Question

I want a group of radio buttons to look like a group of toggle buttons  but still function like radio buttons   It s not necessary that they look exactly like toggle buttons   How can I do this only with CSS and HTML   EDIT  I will be satisfied making the little circle disappear and changing the style when the button is checked unchecked

User · Answer

HTML    lt div gt       lt label gt   lt input type  radio  name  toggle  gt  On  lt  label gt       lt label gt  Off  lt input type  radio  name  toggle  gt   lt  label gt   lt  div gt    CSS   div   overflow auto  border 1px solid  ccc  width 100px    label   float left  padding 3px 0  width 50px  text-align center    input   vertical-align -2px      Live demo  http   jsfiddle net scymE 1

User · Answer

Here is the solution that works for all browsers  also IE7 and IE8  didn t check for IE6    http   jsfiddle net RkvAP 230   HTML   lt div class  toggle  gt       lt label gt  lt input type  radio  name  toggle  gt  lt span gt On lt  span gt  lt  label gt       lt  div gt   lt div class  toggle  gt       lt label gt  lt input type  radio  name  toggle  gt  lt span gt Off lt  span gt  lt  label gt   lt  div gt    JS     label   click function          this  children  span   addClass  input-checked          this  parent   toggle   siblings   toggle   children  label   children  span   removeClass  input-checked          CSS  body       font-family sans-serif      toggle       margin 4px      background-color  EFEFEF      border-radius 4px      border 1px solid  D0D0D0      overflow auto      float left      toggle label       float left      width 2 0em      toggle label span       text-align center      padding 3px 0px      display block      cursor  pointer      toggle label input       position absolute      top -20px      toggle  input-checked      bounds input checked   span works for firefox and ie9 but breaks js for ie8 ONLY           background-color  404040      color  F7F7F7      Makes use of minimal JS  jQuery  two lines

User · Answer

I know this is an old question  but since I was just looking to do this  I thought I would post what I ended up with   Because I am using Bootstrap  I went with a Bootstrap option   HTML   lt div class  col-xs-12  gt       lt div class  form-group  gt           lt asp HiddenField ID  hidType  runat  server    gt           lt div class  btn-group  role  group  aria-label  Selection type  id  divType  gt               lt button type  button  class  btn btn-default BtnType  data-value  1  gt Food lt  button gt                                       lt button type  button  class  btn btn-default BtnType  data-value  2  gt Drink lt  button gt           lt  div gt       lt  div gt   lt  div gt    jQuery    document  ready function              divType button   click function                this  addClass  active   siblings   removeClass  active                 lt    hidType ClientID  gt    val   this  data  value               alert   this  data  value                                I chose to store the value in a hidden field so that it would be easy for me to get the value server-side

User · Answer

Depending on which browsers you aim to support  you could use the  checked pseudo-class selector in addition to hiding the radio buttons   Using this HTML    lt input type  radio  id  toggle-on  name  toggle  checked  gt  lt label for  toggle-on  gt On lt  label  gt  lt input type  radio  id  toggle-off  name  toggle   gt  lt label for  toggle-off  gt Off lt  label gt    You could use something like the following CSS   input type  radio   toggle     display  none     input type  radio   toggle checked   label        Do something special with the selected state        For instance   to keep the custom CSS brief  if you were using Bootstrap  you might add class  btn  to your  lt label gt  elements and style them appropriately to create a toggle that looks like        which just requires the following additional CSS   input type  radio   toggle checked   label     background-image  linear-gradient to top  969696  727272     box-shadow  inset 0 1px 6px rgba 41  41  41  0 2                       0 1px 2px rgba 0  0  0  0 05     cursor  default    color   E6E6E6    border-color  transparent    text-shadow  0 1px 1px rgba 40  40  40  0 75      input type  radio   toggle   label     width  3em     input type  radio   toggle checked   label btn hover     background-color  inherit    background-position  0 0    transition  none     input type  radio   toggle-left   label     border-right  0    border-top-right-radius  0    border-bottom-right-radius  0     input type  radio   toggle-right   label     border-top-left-radius  0    border-bottom-left-radius  0      I ve included this as well as the extra fallback styles in a radio button toggle jsFiddle demo  Note that  checked is only supported in IE 9  so this approach is limited to newer browsers   However  if you need to support IE 8 and are willing to fall back on JavaScript   you can hack in pseudo-support for  checked without too much difficulty  although you can just as easily set classes directly on the label at that point    Using some quick and dirty jQuery code as an example of the workaround       no-checkedselector   on  change    input type  radio   toggle   function          if  this checked               input name      this name       checked   removeClass  checked              this  addClass  checked               Force IE 8 to update the sibling selector immediately by            toggling a class on a parent element             toggle-container   addClass  xyz   removeClass  xyz                  no-checkedselector input type  radio   toggle checked   addClass  checked      You can then make a few changes to the CSS to complete things   input type  radio   toggle        IE 8 doesn t seem to like to update radio buttons that are display none      position  absolute    left  -99em     input type  radio   toggle checked   label  input type  radio   toggle checked   label        Do something special with the selected state         If you re using Modernizr  you can use the  selector test to help determine if you need the fallback  I called my test  checkedselector  in the example code  and the jQuery event handler is subsequently only set up when the test fails

User · Answer

x000D   x000D    document  ready function              divType button   click function                this  addClass  active   siblings   removeClass  active                 lt    hidType ClientID  gt    val   this  data  value               alert   this  data  value                              x000D   lt div class  col-xs-12  gt       lt div class  form-group  gt           lt asp HiddenField ID  hidType  runat  server    gt           lt div class  btn-group  role  group  aria-label  Selection type  id  divType  gt               lt button type  button  class  btn btn-default BtnType  data-value  1  gt Food lt  button gt                                       lt button type  button  class  btn btn-default BtnType  data-value  2  gt Drink lt  button gt           lt  div gt       lt  div gt   lt  div gt  x000D   x000D   x000D

User · Answer

Inspired by Michal B  answer  If you use bootstrap     x000D   x000D  label btn   x000D    padding  0  x000D    x000D   x000D  label btn input   x000D    opacity  0  x000D    position  absolute  x000D    x000D   x000D  label btn span   x000D    text-align  center  x000D    padding  6px 12px  x000D    display  block  x000D    x000D   x000D  label btn input checked span   x000D    background-color  rgb 80  110  228   x000D    color   fff  x000D    x000D   lt link href  https   stackpath bootstrapcdn com bootstrap 4 4 1 css bootstrap min css  rel  stylesheet  integrity  sha384-Vkoo8x4CGsO3 Hhxv8T Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh  crossorigin  anonymous  gt  x000D   lt div gt  x000D     lt label class  btn btn-outline-primary  gt  lt input type  radio  name  toggle  gt  lt span gt One lt  span gt  lt  label gt  x000D     lt label class  btn btn-outline-primary  gt  lt input type  radio  name  toggle  gt  lt span gt Two lt  span gt  lt  label gt  x000D     lt label class  btn btn-outline-primary  gt  lt input type  radio  name  toggle  gt  lt span gt Three lt  span gt  lt  label gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I usually hide the real radio buttons with CSS  or make them into individual hidden inputs   put in the imagery I want  you could use an unordered list and apply your styles to the li element  and then use click events to toggle the inputs  That approach also means you can keep things accessible for users who aren t on a normal web browser-- just hide your ul by default and show the radio buttons

User · Answer

Here s my version of that nice CSS solution JS Fiddle example posted above   http   jsfiddle net 496c9   HTML   lt div id  donate  gt       lt label class  blue  gt  lt input type  radio  name  toggle  gt  lt span gt  20 lt  span gt  lt  label gt       lt label class  green  gt  lt input type  radio  name  toggle  gt  lt span gt  50 lt  span gt  lt  label gt       lt label class  yellow  gt  lt input type  radio  name  toggle  gt  lt span gt  100 lt  span gt  lt  label gt       lt label class  pink  gt  lt input type  radio  name  toggle  gt  lt span gt  500 lt  span gt  lt  label gt       lt label class  purple  gt  lt input type  radio  name  toggle  gt  lt span gt  1000 lt  span gt  lt  label gt   lt  div gt    CSS  body       font-family sans-serif      donate       margin 4px       float left      donate label       float left      width 170px      margin 4px      background-color  EFEFEF      border-radius 4px      border 1px solid  D0D0D0      overflow auto       donate label span       text-align center      font-size  32px      padding 13px 0px      display block      donate label input       position absolute      top -20px      donate input checked   span       background-color  404040      color  F7F7F7      donate  yellow       background-color  FFCC00      color  333      donate  blue       background-color  00BFFF      color  333      donate  pink       background-color  FF99FF      color  333      donate  green       background-color  A3D900      color  333     donate  purple       background-color  B399FF      color  333      Styled with coloured buttons

User · Answer

PURE CSS AND HTML  as asked  with ANIMATIONS   Example Image  you can run the code below      After looking for something really clean and straight forward  I ended up building this with ONE simple change from another code that was  built only thinking on checkboxes  so I tryed the funcionality for RADIOS and it worked too      The CSS  SCSS  is fully from  mallendeo  as established on the JS credits   what I did was simply change the type of the input to RADIO  and gave the same name to all the radio switches     and VOILA   They deactivate automatically one to the other    Very clean  and as you asked it s only CSS and HTML    It is exactly what I was looking for since 3 days after trying and editing more than a dozen of options  which mostly requiered jQuery  or didn t allow labels  or even wheren t really compatible with current browsers   This one s got it all   I m obligated to include the code in here to allow you to see a working example  so    x000D   x000D      Toggle buttons x000D      mallendeo x000D     forked  davidtaubmann x000D     from https   codepen io mallendeo pen eLIiG x000D      x000D  html  body   x000D    display  -webkit-box  x000D    display  -webkit-flex  x000D    display  -ms-flexbox  x000D    display  flex  x000D    min-height  100   x000D    -webkit-box-pack  center  x000D    -webkit-justify-content  center  x000D        -ms-flex-pack  center  x000D            justify-content  center  x000D    -webkit-box-align  center  x000D    -webkit-align-items  center  x000D        -ms-flex-align  center  x000D            align-items  center  x000D    -webkit-box-orient  vertical  x000D    -webkit-box-direction  normal  x000D    -webkit-flex-direction  column  x000D        -ms-flex-direction  column  x000D            flex-direction  column  x000D    font-family  sans-serif  x000D    x000D   x000D  ul  li   x000D    list-style  none  x000D    margin  0  x000D    padding  0  x000D    x000D   x000D   tg-list   x000D    text-align  center  x000D    display  -webkit-box  x000D    display  -webkit-flex  x000D    display  -ms-flexbox  x000D    display  flex  x000D    -webkit-box-align  center  x000D    -webkit-align-items  center  x000D        -ms-flex-align  center  x000D            align-items  center  x000D    x000D   x000D   tg-list-item   x000D    margin  0 10px   x000D    x000D   x000D  h2   x000D    color   777  x000D    x000D   x000D  h4   x000D    color   999  x000D    x000D   x000D   tgl   x000D    display  none  x000D    x000D   tgl   tgl after   tgl before   tgl     tgl   after   tgl   before   tgl    tgl-btn   x000D    box-sizing  border-box  x000D    x000D   tgl  -moz-selection   tgl after  -moz-selection   tgl before  -moz-selection   tgl    -moz-selection   tgl   after  -moz-selection   tgl   before  -moz-selection   tgl    tgl-btn  -moz-selection   x000D    background  none  x000D    x000D   tgl  selection   tgl after  selection   tgl before  selection   tgl    selection   tgl   after  selection   tgl   before  selection   tgl    tgl-btn  selection   x000D    background  none  x000D    x000D   tgl    tgl-btn   x000D    outline  0  x000D    display  block  x000D    width  4em  x000D    height  2em  x000D    position  relative  x000D    cursor  pointer  x000D    -webkit-user-select  none  x000D       -moz-user-select  none  x000D        -ms-user-select  none  x000D            user-select  none  x000D    x000D   tgl    tgl-btn after   tgl    tgl-btn before   x000D    position  relative  x000D    display  block  x000D    content      x000D    width  50   x000D    height  100   x000D    x000D   tgl    tgl-btn after   x000D    left  0  x000D    x000D   tgl    tgl-btn before   x000D    display  none  x000D    x000D   tgl checked    tgl-btn after   x000D    left  50   x000D    x000D   x000D   tgl-light    tgl-btn   x000D    background   f0f0f0  x000D    border-radius  2em  x000D    padding  2px  x000D    -webkit-transition  all  4s ease  x000D    transition  all  4s ease  x000D    x000D   tgl-light    tgl-btn after   x000D    border-radius  50   x000D    background   fff  x000D    -webkit-transition  all  2s ease  x000D    transition  all  2s ease  x000D    x000D   tgl-light checked    tgl-btn   x000D    background   9FD6AE  x000D    x000D   x000D   tgl-ios    tgl-btn   x000D    background   fbfbfb  x000D    border-radius  2em  x000D    padding  2px  x000D    -webkit-transition  all  4s ease  x000D    transition  all  4s ease  x000D    border  1px solid  e8eae9  x000D    x000D   tgl-ios    tgl-btn after   x000D    border-radius  2em  x000D    background   fbfbfb  x000D    -webkit-transition  left 0 3s cubic-bezier 0 175  0 885  0 32  1 275   padding 0 3s ease  margin 0 3s ease  x000D    transition  left 0 3s cubic-bezier 0 175  0 885  0 32  1 275   padding 0 3s ease  margin 0 3s ease  x000D    box-shadow  0 0 0 1px rgba 0  0  0  0 1   0 4px 0 rgba 0  0  0  0 08   x000D    x000D   tgl-ios    tgl-btn hover after   x000D    will-change  padding  x000D    x000D   tgl-ios    tgl-btn active   x000D    box-shadow  inset 0 0 0 2em  e8eae9  x000D    x000D   tgl-ios    tgl-btn active after   x000D    padding-right   8em  x000D    x000D   tgl-ios checked    tgl-btn   x000D    background   86d993  x000D    x000D   tgl-ios checked    tgl-btn active   x000D    box-shadow  none  x000D    x000D   tgl-ios checked    tgl-btn active after   x000D    margin-left  - 8em  x000D    x000D   x000D   tgl-skewed    tgl-btn   x000D    overflow  hidden  x000D    -webkit-transform  skew -10deg   x000D            transform  skew -10deg   x000D    -webkit-backface-visibility  hidden  x000D            backface-visibility  hidden  x000D    -webkit-transition  all  2s ease  x000D    transition  all  2s ease  x000D    font-family  sans-serif  x000D    background   888  x000D    x000D   tgl-skewed    tgl-btn after   tgl-skewed    tgl-btn before   x000D    -webkit-transform  skew 10deg   x000D            transform  skew 10deg   x000D    display  inline-block  x000D    -webkit-transition  all  2s ease  x000D    transition  all  2s ease  x000D    width  100   x000D    text-align  center  x000D    position  absolute  x000D    line-height  2em  x000D    font-weight  bold  x000D    color   fff  x000D    text-shadow  0 1px 0 rgba 0  0  0  0 4   x000D    x000D   tgl-skewed    tgl-btn after   x000D    left  100   x000D    content  attr data-tg-on   x000D    x000D   tgl-skewed    tgl-btn before   x000D    left  0  x000D    content  attr data-tg-off   x000D    x000D   tgl-skewed    tgl-btn active   x000D    background   888  x000D    x000D   tgl-skewed    tgl-btn active before   x000D    left  -10   x000D    x000D   tgl-skewed checked    tgl-btn   x000D    background   86d993  x000D    x000D   tgl-skewed checked    tgl-btn before   x000D    left  -100   x000D    x000D   tgl-skewed checked    tgl-btn after   x000D    left  0  x000D    x000D   tgl-skewed checked    tgl-btn active after   x000D    left  10   x000D    x000D   x000D   tgl-flat    tgl-btn   x000D    padding  2px  x000D    -webkit-transition  all  2s ease  x000D    transition  all  2s ease  x000D    background   fff  x000D    border  4px solid  f2f2f2  x000D    border-radius  2em  x000D    x000D   tgl-flat    tgl-btn after   x000D    -webkit-transition  all  2s ease  x000D    transition  all  2s ease  x000D    background   f2f2f2  x000D    content      x000D    border-radius  1em  x000D    x000D   tgl-flat checked    tgl-btn   x000D    border  4px solid  7FC6A6  x000D    x000D   tgl-flat checked    tgl-btn after   x000D    left  50   x000D    background   7FC6A6  x000D    x000D   x000D   tgl-flip    tgl-btn   x000D    padding  2px  x000D    -webkit-transition  all  2s ease  x000D    transition  all  2s ease  x000D    font-family  sans-serif  x000D    -webkit-perspective  100px  x000D            perspective  100px  x000D    x000D   tgl-flip    tgl-btn after   tgl-flip    tgl-btn before   x000D    display  inline-block  x000D    -webkit-transition  all  4s ease  x000D    transition  all  4s ease  x000D    width  100   x000D    text-align  center  x000D    position  absolute  x000D    line-height  2em  x000D    font-weight  bold  x000D    color   fff  x000D    position  absolute  x000D    top  0  x000D    left  0  x000D    -webkit-backface-visibility  hidden  x000D            backface-visibility  hidden  x000D    border-radius  4px  x000D    x000D   tgl-flip    tgl-btn after   x000D    content  attr data-tg-on   x000D    background   02C66F  x000D    -webkit-transform  rotateY -180deg   x000D            transform  rotateY -180deg   x000D    x000D   tgl-flip    tgl-btn before   x000D    background   FF3A19  x000D    content  attr data-tg-off   x000D    x000D   tgl-flip    tgl-btn active before   x000D    -webkit-transform  rotateY -20deg   x000D            transform  rotateY -20deg   x000D    x000D   tgl-flip checked    tgl-btn before   x000D    -webkit-transform  rotateY 180deg   x000D            transform  rotateY 180deg   x000D    x000D   tgl-flip checked    tgl-btn after   x000D    -webkit-transform  rotateY 0   x000D            transform  rotateY 0   x000D    left  0  x000D    background   7FC6A6  x000D    x000D   tgl-flip checked    tgl-btn active after   x000D    -webkit-transform  rotateY 20deg   x000D            transform  rotateY 20deg   x000D    x000D   lt h2 gt Toggle  em lt  h2 gt  x000D   lt ul class  tg-list  gt  x000D     lt li class  tg-list-item  gt  x000D       lt h3 gt Radios  lt  h3 gt  x000D     lt  li gt  x000D     lt li class  tg-list-item  gt  x000D       lt label class  tgl-btn  for  rd1  gt  x000D         lt h4 gt Light lt  h4 gt  x000D       lt  label gt  x000D       lt input class  tgl tgl-light  id  rd1  name  group  type  radio  gt  x000D       lt label class  tgl-btn  for  rd1  gt  lt  label gt  x000D       lt label class  tgl-btn  for  rd1  gt  x000D         lt h4 gt Light lt  h4 gt  x000D       lt  label gt  x000D     lt  li gt  x000D     lt li class  tg-list-item  gt  x000D       lt label class  tgl-btn  for  rd2  gt  x000D         lt h4 gt iOS 7  Disabled  lt  h4 gt  x000D       lt  label gt  x000D       lt input checked class  tgl tgl-ios  disabled id  rd2  name  group  type  radio  gt  x000D       lt label class  tgl-btn  for  rd2  gt  lt  label gt  x000D       lt label class  tgl-btn  for  rd2  gt  x000D         lt h4 gt iOS 7  Disabled  lt  h4 gt  x000D       lt  label gt  x000D     lt  li gt  x000D     lt li class  tg-list-item  gt  x000D       lt label class  tgl-btn  for  rd3  gt  x000D         lt h4 gt Skewed lt  h4 gt  x000D       lt  label gt  x000D       lt input class  tgl tgl-skewed  id  rd3  name  group  type  radio  gt  x000D       lt label class  tgl-btn  data-tg-off  OFF  data-tg-on  ON  for  rd3  gt  lt  label gt  x000D       lt label class  tgl-btn  for  rd3  gt  x000D         lt h4 gt Skewed lt  h4 gt  x000D       lt  label gt  x000D     lt  li gt  x000D     lt li class  tg-list-item  gt  x000D       lt label class  tgl-btn  for  rd4  gt  x000D         lt h4 gt Flat lt  h4 gt  x000D       lt  label gt  x000D       lt input class  tgl tgl-flat  id  rd4  name  group  type  radio  gt  x000D       lt label class  tgl-btn  for  rd4  gt  lt  label gt  x000D       lt label class  tgl-btn  for  rd4  gt  x000D         lt h4 gt Flat lt  h4 gt  x000D       lt  label gt  x000D     lt  li gt  x000D     lt li class  tg-list-item  gt  x000D       lt label class  tgl-btn  for  rd5  gt  x000D         lt h4 gt Flip lt  h4 gt  x000D       lt  label gt  x000D       lt input class  tgl tgl-flip  id  rd5  name  group  type  radio  gt  x000D       lt label class  tgl-btn  data-tg-off  Nope  data-tg-on  Yeah   for  rd5  gt  lt  label gt  x000D       lt label class  tgl-btn  for  rd5  gt  x000D         lt h4 gt Flip lt  h4 gt  x000D       lt  label gt  x000D     lt  li gt  x000D   lt  ul gt  x000D   lt ul class  tg-list  gt  x000D     lt li class  tg-list-item  gt  x000D       lt h3 gt Checkboxes  lt  h3 gt  x000D     lt  li gt  x000D     lt li class  tg-list-item  gt  x000D       lt label class  tgl-btn  for  cb1  gt  x000D         lt h4 gt Light lt  h4 gt  x000D       lt  label gt  x000D       lt input class  tgl tgl-light  id  cb1  type  checkbox  gt  x000D       lt label class  tgl-btn  for  cb1  gt  lt  label gt  x000D       lt label class  tgl-btn  for  cb1  gt  x000D         lt h4 gt Light lt  h4 gt  x000D       lt  label gt  x000D     lt  li gt  x000D     lt li class  tg-list-item  gt  x000D       lt label class  tgl-btn  for  cb2  gt  x000D         lt h4 gt iOS 7 lt  h4 gt  x000D       lt  label gt  x000D       lt input class  tgl tgl-ios  id  cb2  type  checkbox  gt  x000D       lt label class  tgl-btn  for  cb2  gt  lt  label gt  x000D       lt label class  tgl-btn  for  cb2  gt  x000D         lt h4 gt iOS 7 lt  h4 gt  x000D       lt  label gt  x000D     lt  li gt  x000D     lt li class  tg-list-item  gt  x000D       lt label class  tgl-btn  for  cb3  gt  x000D         lt h4 gt Skewed lt  h4 gt  x000D       lt  label gt  x000D       lt input class  tgl tgl-skewed  id  cb3  type  checkbox  gt  x000D       lt label class  tgl-btn  data-tg-off  OFF  data-tg-on  ON  for  cb3  gt  lt  label gt  x000D       lt label class  tgl-btn  for  cb3  gt  x000D         lt h4 gt Skewed lt  h4 gt  x000D       lt  label gt  x000D     lt  li gt  x000D     lt li class  tg-list-item  gt  x000D       lt label class  tgl-btn  for  cb4  gt  x000D         lt h4 gt Flat lt  h4 gt  x000D       lt  label gt  x000D       lt input class  tgl tgl-flat  id  cb4  type  checkbox  gt  x000D       lt label class  tgl-btn  for  cb4  gt  lt  label gt  x000D       lt label class  tgl-btn  for  cb4  gt  x000D         lt h4 gt Flat lt  h4 gt  x000D       lt  label gt  x000D     lt  li gt  x000D     lt li class  tg-list-item  gt  x000D       lt label class  tgl-btn  for  cb5  gt  x000D         lt h4 gt Flip lt  h4 gt  x000D       lt  label gt  x000D       lt input class  tgl tgl-flip  id  cb5  type  checkbox  gt  x000D       lt label class  tgl-btn  data-tg-off  Nope  data-tg-on  Yeah   for  cb5  gt  lt  label gt  x000D       lt label class  tgl-btn  for  cb5  gt  x000D         lt h4 gt Flip lt  h4 gt  x000D       lt  label gt  x000D     lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    If you run the snippet  you ll see I leave the iOS radio checked and disabled  so you can watch how it is also affected when activating another one  I also included 2 labels for each radio  one before and one after  The copy of the original code to show the working checkboxes in the same window is also included

[html] How to make a radio button look like a toggle button

Examples related to html

Examples related to css

Examples related to radio-button

Examples related to radiobuttonlist

Examples related to togglebutton