Can you style an html radio button to look like a checkbox

Question

I have an html form that a user will fill out and print   Once printed  these forms will be faxed or mailed to a government agency  and need to look close enough like the original form published by said agency that a government bureaucrat doesn t spot that this is a reproduction   The data entered in the form is not saved anywhere or even submitted back to a web server   All that matters is that our users can easily find these forms on our intranet site and type into the form for printing with their normal keyboard   On the screen I want to leave the radio button as-is  to enforce and communicate radio button usage  choose only one option    However  when it prints out I need it to print with the square checkbox style rather than the round radio button style   I know how to use a media selector to set styles for print only  so that s not the issue   It s just that I don t know if I can style the radio button like I want at all     If I can t get this working I m gonna have to create a checkbox to shadow each radio button  use javascript to keep the checkboxes and radio buttons in sync  and css to show the one I care about in the proper medium   Obviously if I can just style them it would save a lot of work

User · Answer

I don t think you can make a control look like anything other than a control with CSS   Your best bet it to make a PRINT button goes to a new page with a graphic in place of the selected radio button  then do a window print   from there

User · Answer

In CSS3   input type radio   content url mycheckbox png   input type radio  checked  content url mycheckbox-checked png     In reality    lt span class fakecheckbox gt  lt input type radio gt  lt img src  checkbox png  alt    gt  lt  span gt    media screen   fakecheckbox img  display none    media print   fakecheckbox input  display none      and you ll need Javascript to keep  lt img gt  and radios in sync  and ideally insert them there in a first place     I ve used  lt img gt   because browsers are usually configured not to print background-image  It s better to use image than another control  because image is non-interactive and less likely to cause problems

User · Answer

In CSS3   input type radio   content url mycheckbox png   input type radio  checked  content url mycheckbox-checked png     In reality    lt span class fakecheckbox gt  lt input type radio gt  lt img src  checkbox png  alt    gt  lt  span gt    media screen   fakecheckbox img  display none    media print   fakecheckbox input  display none      and you ll need Javascript to keep  lt img gt  and radios in sync  and ideally insert them there in a first place     I ve used  lt img gt   because browsers are usually configured not to print background-image  It s better to use image than another control  because image is non-interactive and less likely to cause problems

User · Answer

I tweaked user2314737 s answer to use font awesome for the icon  For those unfamiliar with fa  one significant benefit over img s is the vector based rendering inherent to fonts  I e  no image jaggies at any zoom level   jsFiddle  Result     x000D   x000D  div checkRadioContainer  gt  label  gt  input   x000D   visibility  hidden  x000D    x000D   x000D  div checkRadioContainer   x000D   max-width  10em  x000D    x000D  div checkRadioContainer  gt  label   x000D   display  block  x000D   border  2px solid grey  x000D   margin-bottom  -2px  x000D   cursor  pointer  x000D    x000D   x000D  div checkRadioContainer  gt  label hover   x000D   background-color  AliceBlue  x000D    x000D   x000D  div checkRadioContainer  gt  label  gt  span   x000D   display  inline-block  x000D   vertical-align  top  x000D   line-height  2em  x000D    x000D   x000D  div checkRadioContainer  gt  label  gt  input   i   x000D   visibility  hidden  x000D   color  green  x000D   margin-left  -0 5em  x000D   margin-right  0 2em  x000D    x000D   x000D  div checkRadioContainer  gt  label  gt  input checked   i   x000D   visibility  visible  x000D    x000D   lt div class  checkRadioContainer  gt  x000D    lt label gt  x000D     lt input type  radio  name  radioGroup    gt  x000D     lt i class  fa fa-check fa-2x  gt  lt  i gt  x000D     lt span gt Item 1 lt  span gt  x000D    lt  label gt  x000D    lt label gt  x000D     lt input type  radio  name  radioGroup    gt  x000D     lt i class  fa fa-check fa-2x  gt  lt  i gt  x000D     lt span gt Item 2 lt  span gt  x000D    lt  label gt  x000D    lt label gt  x000D     lt input type  radio  name  radioGroup    gt  x000D     lt i class  fa fa-check fa-2x  gt  lt  i gt  x000D     lt span gt Item 3 lt  span gt  x000D    lt  label gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Simple and neat with fontawesome  input type radio        -moz-appearance  none      -webkit-appearance  none      -o-appearance  none      outline  none      content  none      margin-left  5px     input type radio  before       font-family   FontAwesome       content    f00c       font-size  25px      color  transparent  important      background   fff      width  25px      height  25px      border  2px solid black      margin-right  5px     input type radio  checked before       color  black  important

User · Answer

Yes  CSS can do this    x000D   x000D  input type checkbox    x000D    display  none  x000D    x000D  input type checkbox      before   x000D    content      x000D    display  inline-block  x000D    margin  0 0 4em  x000D       Make some horizontal space     x000D    width   6em  x000D    height   6em  x000D    border-radius  0 6em  x000D    box-shadow  0px 0px 0px  5px  888 x000D       An outer circle     x000D      x000D       No inner circle     x000D    background-color   ddd  x000D       Inner color     x000D    x000D  input type checkbox  checked     before   x000D    box-shadow  0px 0px 0px  5px  888 x000D       An outer circle     x000D      inset 0px 0px 0px  14em  ddd  x000D       An inner circle with above inner color    x000D    background-color   444  x000D       The dot color    x000D    x000D   lt div gt  x000D     lt input id  check1  type  checkbox  name  check  value  check1  checked gt  x000D     lt label for  check1  gt Fake Checkbox1 lt  label gt  x000D   lt  div gt  x000D   lt div gt  x000D     lt input id  check2  type  checkbox  name  check  value  check2  gt  x000D     lt label for  check2  gt Fake Checkbox2 lt  label gt  x000D   lt  div gt  x000D   lt div gt  x000D     lt input id  check2  type  radio  name  check  value  radio1  checked gt  x000D     lt label for  check2  gt Real Checkbox1 lt  label gt  x000D   lt  div gt  x000D   lt div gt  x000D     lt input id  check2  type  radio  name  check  value  radio2  gt  x000D     lt label for  check2  gt Real Checkbox2 lt  label gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Three years after this question is posted and this is almost within reach   In fact  it s completely achievable in Firefox 1   Chrome 1   Safari 3  and Opera 15  using the CSS3 appearance property   The result is radio elements that look like checkboxes    x000D   x000D  input type  radio     x000D    -webkit-appearance  checkbox     Chrome  Safari  Opera    x000D    -moz-appearance  checkbox        Firefox    x000D    -ms-appearance  checkbox         not currently supported    x000D    x000D   lt label gt  lt input type  radio  name  radio  gt  Checkbox 1 lt  label gt  x000D   lt label gt  lt input type  radio  name  radio  gt  Checkbox 2 lt  label gt  x000D   x000D   x000D   jsfiddle  http   jsfiddle net mq8Zq   Note  this was eventually dropped from the CSS3 specification due to a lack of support and conformance from vendors  I d recommend against implementing it unless you only need to support Webkit or Gecko based browsers

User · Answer

I don t think you can make a control look like anything other than a control with CSS   Your best bet it to make a PRINT button goes to a new page with a graphic in place of the selected radio button  then do a window print   from there

User · Answer

So I have been lurking on stack for so many years   This is actually my first time posting on here   Anyhow  this might seem insane but I came across this post while struggling with the same issue and came up with a dirty solution   I know there are more elegant ways to perhaps set this as a property value but   if you look at lines 12880-12883 in tcpdf php     fx       w -  this- gt getAbsFontMeasure  tmpfont  cw    110       2     this- gt k    fy      w -     tmpfont  desc    Ascent   -  tmpfont  desc    Descent       this- gt FontSizePt   1000     this- gt k      this- gt k    popt  ap    n    onvalue    sprintf  q  s BT  F d  F Tf  F  F Td    chr  110      Tj ET Q    this- gt TextColor   tmpfont  i     this- gt FontSizePt   fx   fy    popt  ap    n    Off     sprintf  q  s BT  F d  F Tf  F  F Td    chr  111      Tj ET Q    this- gt TextColor   tmpfont  i     this- gt FontSizePt   fx   fy     and lines 13135-13138     fx       w -  this- gt getAbsFontMeasure  tmpfont  cw    108       2     this- gt k    fy      w -     tmpfont  desc    Ascent   -  tmpfont  desc    Descent       this- gt FontSizePt   1000     this- gt k      this- gt k    popt  ap    n    Yes     sprintf  q  s BT  F d  F Tf  F  F Td    chr  108      Tj ET Q    this- gt TextColor   tmpfont  i     this- gt FontSizePt   fx   fy    popt  ap    n    Off     sprintf  q  s BT  F d  F Tf  F  F Td    chr  109      Tj ET Q    this- gt TextColor   tmpfont  i     this- gt FontSizePt   fx   fy     Those widgets are rendered from the zapfdingbats font set    just swap the character codes and voila    checks are radios and or vice versa   This also opens up ideas to make a custom font set to use here and add some nice styling to your form elements   Anyhow  just figured I would offer my two cents     it worked awesome for me

User · Answer

Yes  CSS can do this    x000D   x000D  input type checkbox    x000D    display  none  x000D    x000D  input type checkbox      before   x000D    content      x000D    display  inline-block  x000D    margin  0 0 4em  x000D       Make some horizontal space     x000D    width   6em  x000D    height   6em  x000D    border-radius  0 6em  x000D    box-shadow  0px 0px 0px  5px  888 x000D       An outer circle     x000D      x000D       No inner circle     x000D    background-color   ddd  x000D       Inner color     x000D    x000D  input type checkbox  checked     before   x000D    box-shadow  0px 0px 0px  5px  888 x000D       An outer circle     x000D      inset 0px 0px 0px  14em  ddd  x000D       An inner circle with above inner color    x000D    background-color   444  x000D       The dot color    x000D    x000D   lt div gt  x000D     lt input id  check1  type  checkbox  name  check  value  check1  checked gt  x000D     lt label for  check1  gt Fake Checkbox1 lt  label gt  x000D   lt  div gt  x000D   lt div gt  x000D     lt input id  check2  type  checkbox  name  check  value  check2  gt  x000D     lt label for  check2  gt Fake Checkbox2 lt  label gt  x000D   lt  div gt  x000D   lt div gt  x000D     lt input id  check2  type  radio  name  check  value  radio1  checked gt  x000D     lt label for  check2  gt Real Checkbox1 lt  label gt  x000D   lt  div gt  x000D   lt div gt  x000D     lt input id  check2  type  radio  name  check  value  radio2  gt  x000D     lt label for  check2  gt Real Checkbox2 lt  label gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Very simple idea using a table and no Javascript  Am I being too simplistic    lt style type  text css  media  screen  gt   ageBox  display  none    lt  style gt    lt style type  text css  media  print  gt   ageButton  display  none    lt  style gt    lt tr gt  lt td gt Age  lt  td gt    lt td id  ageButton  gt   lt input type  radio  name  userAge  value  18-24  gt 18-24  lt input type  radio  name  userAge  value  25-34  gt 25-34   lt td id  ageBox  gt   lt input type  checkbox  gt 18-24  lt input type  checkbox  gt 25-34   lt  td gt  lt  tr gt

User · Answer

I don t think you can make a control look like anything other than a control with CSS   Your best bet it to make a PRINT button goes to a new page with a graphic in place of the selected radio button  then do a window print   from there

User · Answer

Three years after this question is posted and this is almost within reach   In fact  it s completely achievable in Firefox 1   Chrome 1   Safari 3  and Opera 15  using the CSS3 appearance property   The result is radio elements that look like checkboxes    x000D   x000D  input type  radio     x000D    -webkit-appearance  checkbox     Chrome  Safari  Opera    x000D    -moz-appearance  checkbox        Firefox    x000D    -ms-appearance  checkbox         not currently supported    x000D    x000D   lt label gt  lt input type  radio  name  radio  gt  Checkbox 1 lt  label gt  x000D   lt label gt  lt input type  radio  name  radio  gt  Checkbox 2 lt  label gt  x000D   x000D   x000D   jsfiddle  http   jsfiddle net mq8Zq   Note  this was eventually dropped from the CSS3 specification due to a lack of support and conformance from vendors  I d recommend against implementing it unless you only need to support Webkit or Gecko based browsers

User · Answer

This is my solution using only CSS  Jsfiddle  http   jsfiddle net xykPT        x000D   x000D  div options  gt  label  gt  input   x000D   visibility  hidden  x000D    x000D   x000D  div options  gt  label   x000D   display  block  x000D   margin  0 0 0 -10px  x000D   padding  0 0 20px 0    x000D   height  20px  x000D   width  150px  x000D    x000D   x000D  div options  gt  label  gt  img   x000D   display  inline-block  x000D   padding  0px  x000D   height 30px  x000D   width 30px  x000D   background  none  x000D    x000D   x000D  div options  gt  label  gt  input checked  img     x000D   background  url http   cdn1 iconfinder com data icons onebit PNG onebit 34 png   x000D   background-repeat  no-repeat  x000D   background-position center center  x000D   background-size 30px 30px  x000D    x000D   lt div class  options  gt  x000D    lt label title  item1  gt  x000D     lt input type  radio  name  foo  value  0    gt   x000D    Item 1 x000D     lt img   gt  x000D    lt  label gt  x000D    lt label title  item2  gt  x000D     lt input type  radio  name  foo  value  1    gt  x000D    Item 2 x000D     lt img   gt  x000D    lt  label gt     x000D    lt label title  item3  gt  x000D     lt input type  radio  name  foo  value  2    gt  x000D    Item 3 x000D     lt img   gt  x000D    lt  label gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Simple and neat with fontawesome  input type radio        -moz-appearance  none      -webkit-appearance  none      -o-appearance  none      outline  none      content  none      margin-left  5px     input type radio  before       font-family   FontAwesome       content    f00c       font-size  25px      color  transparent  important      background   fff      width  25px      height  25px      border  2px solid black      margin-right  5px     input type radio  checked before       color  black  important

User · Answer

In CSS3   input type radio   content url mycheckbox png   input type radio  checked  content url mycheckbox-checked png     In reality    lt span class fakecheckbox gt  lt input type radio gt  lt img src  checkbox png  alt    gt  lt  span gt    media screen   fakecheckbox img  display none    media print   fakecheckbox input  display none      and you ll need Javascript to keep  lt img gt  and radios in sync  and ideally insert them there in a first place     I ve used  lt img gt   because browsers are usually configured not to print background-image  It s better to use image than another control  because image is non-interactive and less likely to cause problems

User · Answer

So I have been lurking on stack for so many years   This is actually my first time posting on here   Anyhow  this might seem insane but I came across this post while struggling with the same issue and came up with a dirty solution   I know there are more elegant ways to perhaps set this as a property value but   if you look at lines 12880-12883 in tcpdf php     fx       w -  this- gt getAbsFontMeasure  tmpfont  cw    110       2     this- gt k    fy      w -     tmpfont  desc    Ascent   -  tmpfont  desc    Descent       this- gt FontSizePt   1000     this- gt k      this- gt k    popt  ap    n    onvalue    sprintf  q  s BT  F d  F Tf  F  F Td    chr  110      Tj ET Q    this- gt TextColor   tmpfont  i     this- gt FontSizePt   fx   fy    popt  ap    n    Off     sprintf  q  s BT  F d  F Tf  F  F Td    chr  111      Tj ET Q    this- gt TextColor   tmpfont  i     this- gt FontSizePt   fx   fy     and lines 13135-13138     fx       w -  this- gt getAbsFontMeasure  tmpfont  cw    108       2     this- gt k    fy      w -     tmpfont  desc    Ascent   -  tmpfont  desc    Descent       this- gt FontSizePt   1000     this- gt k      this- gt k    popt  ap    n    Yes     sprintf  q  s BT  F d  F Tf  F  F Td    chr  108      Tj ET Q    this- gt TextColor   tmpfont  i     this- gt FontSizePt   fx   fy    popt  ap    n    Off     sprintf  q  s BT  F d  F Tf  F  F Td    chr  109      Tj ET Q    this- gt TextColor   tmpfont  i     this- gt FontSizePt   fx   fy     Those widgets are rendered from the zapfdingbats font set    just swap the character codes and voila    checks are radios and or vice versa   This also opens up ideas to make a custom font set to use here and add some nice styling to your form elements   Anyhow  just figured I would offer my two cents     it worked awesome for me

User · Answer

This is my solution using only CSS  Jsfiddle  http   jsfiddle net xykPT        x000D   x000D  div options  gt  label  gt  input   x000D   visibility  hidden  x000D    x000D   x000D  div options  gt  label   x000D   display  block  x000D   margin  0 0 0 -10px  x000D   padding  0 0 20px 0    x000D   height  20px  x000D   width  150px  x000D    x000D   x000D  div options  gt  label  gt  img   x000D   display  inline-block  x000D   padding  0px  x000D   height 30px  x000D   width 30px  x000D   background  none  x000D    x000D   x000D  div options  gt  label  gt  input checked  img     x000D   background  url http   cdn1 iconfinder com data icons onebit PNG onebit 34 png   x000D   background-repeat  no-repeat  x000D   background-position center center  x000D   background-size 30px 30px  x000D    x000D   lt div class  options  gt  x000D    lt label title  item1  gt  x000D     lt input type  radio  name  foo  value  0    gt   x000D    Item 1 x000D     lt img   gt  x000D    lt  label gt  x000D    lt label title  item2  gt  x000D     lt input type  radio  name  foo  value  1    gt  x000D    Item 2 x000D     lt img   gt  x000D    lt  label gt     x000D    lt label title  item3  gt  x000D     lt input type  radio  name  foo  value  2    gt  x000D    Item 3 x000D     lt img   gt  x000D    lt  label gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

In CSS3   input type radio   content url mycheckbox png   input type radio  checked  content url mycheckbox-checked png     In reality    lt span class fakecheckbox gt  lt input type radio gt  lt img src  checkbox png  alt    gt  lt  span gt    media screen   fakecheckbox img  display none    media print   fakecheckbox input  display none      and you ll need Javascript to keep  lt img gt  and radios in sync  and ideally insert them there in a first place     I ve used  lt img gt   because browsers are usually configured not to print background-image  It s better to use image than another control  because image is non-interactive and less likely to cause problems

User · Answer

I don t think you can make a control look like anything other than a control with CSS   Your best bet it to make a PRINT button goes to a new page with a graphic in place of the selected radio button  then do a window print   from there

User · Answer

appearance property doesn t work in all browser  You can do like the following-   x000D   x000D  input type  radio    x000D    display  none  x000D    x000D  label before  x000D    content url http   strawberrycambodia com book admin templates default images icons 16x16 checkbox gif   x000D    x000D  input type  radio   checked label before  x000D    content url http   www treatment-abroad ru img admin icons 16x16 checkbox gif   x000D    x000D    x000D     lt input type  radio  name  gender  id  test1  value  male  gt  x000D     lt label for  test1  gt  check 1 lt  label gt  x000D     lt input type  radio  name  gender  value  female  id  test2  gt  x000D     lt label for  test2  gt  check 2 lt  label gt  x000D     lt input type  radio  name  gender  value  other  id  test3  gt  x000D     lt label for  test3  gt  check 3 lt  label gt    x000D   x000D   x000D    It works IE 8  and other browsers

User · Answer

appearance property doesn t work in all browser  You can do like the following-   x000D   x000D  input type  radio    x000D    display  none  x000D    x000D  label before  x000D    content url http   strawberrycambodia com book admin templates default images icons 16x16 checkbox gif   x000D    x000D  input type  radio   checked label before  x000D    content url http   www treatment-abroad ru img admin icons 16x16 checkbox gif   x000D    x000D    x000D     lt input type  radio  name  gender  id  test1  value  male  gt  x000D     lt label for  test1  gt  check 1 lt  label gt  x000D     lt input type  radio  name  gender  value  female  id  test2  gt  x000D     lt label for  test2  gt  check 2 lt  label gt  x000D     lt input type  radio  name  gender  value  other  id  test3  gt  x000D     lt label for  test3  gt  check 3 lt  label gt    x000D   x000D   x000D    It works IE 8  and other browsers

User · Answer

Yes it can be done using this css  i ve hidden the default radio button and made a custom radio button that looks like a checkbox   x000D   x000D   css-prp     color   17CBF2    font-family  arial       con1     display  block    position  relative    padding-left  25px    margin-bottom  12px    cursor  pointer    font-size  15px    -webkit-user-select  none    -moz-user-select  none    -ms-user-select  none    user-select  none        Hide the browser s default radio button     con1 input     position  absolute    opacity  0    cursor  pointer        Create a custom radio button     checkmark     position  absolute    top  0    left  0    height  18px    width  18px    background-color  lightgrey    border-radius  10         When the radio button is checked  add a blue background     con1 input checked    checkmark     background-color   17CBF2    x000D   lt label class  con1  gt  lt span gt Yes lt  span gt     lt input type  radio  name  radio1  checked gt     lt span class  checkmark  gt  lt  span gt   lt  label gt   lt label class  con1  gt  lt span gt No lt  span gt     lt input type  radio  name  radio1  gt     lt span class  checkmark  gt  lt  span gt   lt  label gt  x000D   x000D   x000D

User · Answer

Pure Vanilla CSS   HTML solution in 2021  It uses the CSS appearance  none  property  Seems to be compatible with all major browsers at this time  https   caniuse com  search appearance 3A 20none  x000D   x000D  input type  radio       appearance  none     border  1px solid  d3d3d3     width  30px     height  30px     content  none     outline  none     margin  0     box-shadow  rgba 0  0  0  0 24  0px 3px 8px     input type  radio   checked     appearance  none    outline  none    padding  0    content  none    border  none     input type  radio   checked  before    position  absolute    color  green  important    content    00A0 2713 00A0   important    border  1px solid  d3d3d3    font-weight  bolder    font-size  21px    x000D   lt input type  radio  name  radio  checked gt   lt input type  radio  name  radio  gt   lt input type  radio  name  radio  gt  x000D   x000D   x000D

User · Answer

I tweaked user2314737 s answer to use font awesome for the icon  For those unfamiliar with fa  one significant benefit over img s is the vector based rendering inherent to fonts  I e  no image jaggies at any zoom level   jsFiddle  Result     x000D   x000D  div checkRadioContainer  gt  label  gt  input   x000D   visibility  hidden  x000D    x000D   x000D  div checkRadioContainer   x000D   max-width  10em  x000D    x000D  div checkRadioContainer  gt  label   x000D   display  block  x000D   border  2px solid grey  x000D   margin-bottom  -2px  x000D   cursor  pointer  x000D    x000D   x000D  div checkRadioContainer  gt  label hover   x000D   background-color  AliceBlue  x000D    x000D   x000D  div checkRadioContainer  gt  label  gt  span   x000D   display  inline-block  x000D   vertical-align  top  x000D   line-height  2em  x000D    x000D   x000D  div checkRadioContainer  gt  label  gt  input   i   x000D   visibility  hidden  x000D   color  green  x000D   margin-left  -0 5em  x000D   margin-right  0 2em  x000D    x000D   x000D  div checkRadioContainer  gt  label  gt  input checked   i   x000D   visibility  visible  x000D    x000D   lt div class  checkRadioContainer  gt  x000D    lt label gt  x000D     lt input type  radio  name  radioGroup    gt  x000D     lt i class  fa fa-check fa-2x  gt  lt  i gt  x000D     lt span gt Item 1 lt  span gt  x000D    lt  label gt  x000D    lt label gt  x000D     lt input type  radio  name  radioGroup    gt  x000D     lt i class  fa fa-check fa-2x  gt  lt  i gt  x000D     lt span gt Item 2 lt  span gt  x000D    lt  label gt  x000D    lt label gt  x000D     lt input type  radio  name  radioGroup    gt  x000D     lt i class  fa fa-check fa-2x  gt  lt  i gt  x000D     lt span gt Item 3 lt  span gt  x000D    lt  label gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Pure Vanilla CSS   HTML solution in 2021  It uses the CSS appearance  none  property  Seems to be compatible with all major browsers at this time  https   caniuse com  search appearance 3A 20none  x000D   x000D  input type  radio       appearance  none     border  1px solid  d3d3d3     width  30px     height  30px     content  none     outline  none     margin  0     box-shadow  rgba 0  0  0  0 24  0px 3px 8px     input type  radio   checked     appearance  none    outline  none    padding  0    content  none    border  none     input type  radio   checked  before    position  absolute    color  green  important    content    00A0 2713 00A0   important    border  1px solid  d3d3d3    font-weight  bolder    font-size  21px    x000D   lt input type  radio  name  radio  checked gt   lt input type  radio  name  radio  gt   lt input type  radio  name  radio  gt  x000D   x000D   x000D

User · Answer

Yes it can be done using this css  i ve hidden the default radio button and made a custom radio button that looks like a checkbox   x000D   x000D   css-prp     color   17CBF2    font-family  arial       con1     display  block    position  relative    padding-left  25px    margin-bottom  12px    cursor  pointer    font-size  15px    -webkit-user-select  none    -moz-user-select  none    -ms-user-select  none    user-select  none        Hide the browser s default radio button     con1 input     position  absolute    opacity  0    cursor  pointer        Create a custom radio button     checkmark     position  absolute    top  0    left  0    height  18px    width  18px    background-color  lightgrey    border-radius  10         When the radio button is checked  add a blue background     con1 input checked    checkmark     background-color   17CBF2    x000D   lt label class  con1  gt  lt span gt Yes lt  span gt     lt input type  radio  name  radio1  checked gt     lt span class  checkmark  gt  lt  span gt   lt  label gt   lt label class  con1  gt  lt span gt No lt  span gt     lt input type  radio  name  radio1  gt     lt span class  checkmark  gt  lt  span gt   lt  label gt  x000D   x000D   x000D

User · Answer

Very simple idea using a table and no Javascript  Am I being too simplistic    lt style type  text css  media  screen  gt   ageBox  display  none    lt  style gt    lt style type  text css  media  print  gt   ageButton  display  none    lt  style gt    lt tr gt  lt td gt Age  lt  td gt    lt td id  ageButton  gt   lt input type  radio  name  userAge  value  18-24  gt 18-24  lt input type  radio  name  userAge  value  25-34  gt 25-34   lt td id  ageBox  gt   lt input type  checkbox  gt 18-24  lt input type  checkbox  gt 25-34   lt  td gt  lt  tr gt

[html] Can you style an html radio button to look like a checkbox?

Examples related to html

Examples related to css

Examples related to radio-button