How to change the size of the radio button using CSS

Question

Is there a way to control the size of the radio button in CSS

User · Answer

Old question but now there is a simple solution, compatible with most browsers, which is to use CSS3. I tested in IE, Firefox and Chrome and it works.

input[type="radio"] {
    -ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
    transform: scale(1.5);
}

Change the value 1.5, in this case an increment of 50% in size, according to your needs. If the ratio is very high, it can blur the radio button. The next image shows a ratio of 1.5.

User · Answer

lt html gt       lt head gt       lt  head gt       lt body gt    lt style gt   redradio  border 5px black solid border-radius 25px width 25px height 25px background red float left    greenradio  border 5px black solid border-radius 25px width 29px height 29px background green float left    radiobuttons float left clear both margin-bottom 10px    lt  style gt   lt script type  text javascript  gt   lt  -- function switchON groupelement groupvalue buttonelement buttonvalue        var groupelements   document getElementById groupelement       var buttons   groupelements getElementsByTagName  button        for  i 0 i lt buttons length i              if  buttons i  id indexOf   on      -1                buttons i  style display  none             else               buttons i  style display  block                       var buttonON   buttonelement     button on       var buttonOFF   buttonelement     button off       document getElementById buttonON  style display  block       document getElementById buttonOFF  style display  none       document getElementById groupvalue  value buttonvalue       -- gt   lt  script gt    lt form gt       lt h1 gt farbige Radiobutton lt  h1 gt       lt div id  button group  gt           lt input type  hidden  name  button value  id  button value  value     gt           lt span class  radiobuttons  gt               lt button type  button  value  OFF1  name  button1 button off  id  button1 button off  onclick  switchON  button group   button value   button1  this value   class  redradio  gt  lt  button gt               lt button type  button  value  ON1  name  button1 button on  id  button1 button on  style  display none   class  greenradio  gt  lt  button gt               lt label for  button1 button on  gt  amp nbsp  amp nbsp Ich will eins lt  label gt           lt  span gt  lt br  gt           lt span class  radiobuttons  gt               lt button type  button  value  OFF2  name  button2 button off  id  button2 button off  onclick  switchON  button group   button value   button2  this value   class  redradio  gt  lt  button gt               lt button type  button  value  ON2  name  button2 button on  id  button2 button on  style  display none   class  greenradio  gt  lt  button gt               lt label for  button2 button on  gt  amp nbsp  amp nbsp Ich will zwei lt  label gt           lt  span gt  lt br  gt           lt span class  radiobuttons  gt               lt button type  button  value  OFF3  name  button3 button off  id  button3 button off  onclick  switchON  button group   button value   button3  this value   class  redradio  gt  lt  button gt               lt button type  button  value  ON3  name  button3 button on  id  button3 button on  style  display none   class  greenradio  gt  lt  button gt               lt label for  button3 button on  gt  amp nbsp  amp nbsp Ich will drei lt  label gt           lt  span gt  lt br  gt           lt span class  radiobuttons  gt               lt button type  button  value  OFF4  name  button4 button off  id  button4 button off  onclick  switchON  button group   button value   button4  this value   class  redradio  gt  lt  button gt               lt button type  button  value  ON4  name  button4 button on  id  button4 button on  style  display none   class  greenradio  gt  lt  button gt               lt label for  button4 button on  gt  amp nbsp  amp nbsp Ich will vier lt  label gt           lt  span gt       lt  div gt   lt  form gt        lt  body gt   lt  html gt

User · Answer

This css seems to do the trick   input type radio        border  0px      width  100       height  2em      Setting the border to 0 seems to allow the user to change the size of the button and have the browser render it in that size for eg  the above height  2em will render the button at twice the line height  This also works for checkboxes  input type checkbox    Some browsers render better than others   From a windows box it works in IE8   FF21   Chrome29

User · Answer

Yes  you should be able to set its height and width  as with any element  However  some browsers do not really take these properties into account   This demo gives an overview of what is possible and how it is displayed in various browsers   https   www 456bereastreet com lab styling-form-controls-revisited radio-button   As you ll see  styling radio buttons is not easy  -D  A workaround is to use JavaScript and CSS to replace the radio buttons and other form elements with custom images    https   github com emblematiq Niceforms https   web archive org web 20161119112447 http   ryanfait com resources custom-checkboxes-and-radio-buttons

User · Answer

try this code    it may be the ans what you exactly looking for   x000D   x000D  body  html  x000D    height  100   x000D    background   222222  x000D    x000D   x000D   container  x000D    display  block  x000D    position  relative  x000D    margin  40px auto  x000D    height  auto  x000D    width  500px  x000D    padding  20px  x000D    x000D   x000D  h2   x000D   color   AAAAAA  x000D    x000D   x000D   container ul  x000D    list-style  none  x000D    margin  0  x000D    padding  0  x000D   overflow  auto  x000D    x000D   x000D  ul li  x000D    color   AAAAAA  x000D    display  block  x000D    position  relative  x000D    float  left  x000D    width  100   x000D    height  100px  x000D   border-bottom  1px solid  333  x000D    x000D   x000D  ul li input type radio   x000D    position  absolute  x000D    visibility  hidden  x000D    x000D   x000D  ul li label  x000D    display  block  x000D    position  relative  x000D    font-weight  300  x000D    font-size  1 35em  x000D    padding  25px 25px 25px 80px  x000D    margin  10px auto  x000D    height  30px  x000D    z-index  9  x000D    cursor  pointer  x000D    -webkit-transition  all 0 25s linear  x000D    x000D   x000D  ul li hover label  x000D   color   FFFFFF  x000D    x000D   x000D  ul li  check  x000D    display  block  x000D    position  absolute  x000D    border  5px solid  AAAAAA  x000D    border-radius  100   x000D    height  25px  x000D    width  25px  x000D    top  30px  x000D    left  20px  x000D   z-index  5  x000D   transition  border  25s linear  x000D   -webkit-transition  border  25s linear  x000D    x000D   x000D  ul li hover  check   x000D    border  5px solid  FFFFFF  x000D    x000D   x000D  ul li  check  before   x000D    display  block  x000D    position  absolute  x000D   content      x000D    border-radius  100   x000D    height  15px  x000D    width  15px  x000D    top  5px  x000D   left  5px  x000D    margin  auto  x000D   transition  background 0 25s linear  x000D   -webkit-transition  background 0 25s linear  x000D    x000D   x000D  input type radio  checked    check   x000D    border  5px solid  0DFF92  x000D    x000D   x000D  input type radio  checked    check  before  x000D    background   0DFF92  x000D    x000D   lt ul gt  x000D     lt li gt  x000D       lt input type  radio  id  f-option  name  selector  gt  x000D       lt label for  f-option  gt Male lt  label gt  x000D       x000D       lt div class  check  gt  lt  div gt  x000D     lt  li gt  x000D     x000D     lt li gt  x000D       lt input type  radio  id  s-option  name  selector  gt  x000D       lt label for  s-option  gt Female lt  label gt  x000D       x000D       lt div class  check  gt  lt div class  inside  gt  lt  div gt  lt  div gt  x000D     lt  li gt  x000D     x000D     lt li gt  x000D       lt input type  radio  id  t-option  name  selector  gt  x000D       lt label for  t-option  gt Transgender lt  label gt  x000D       x000D       lt div class  check  gt  lt div class  inside  gt  lt  div gt  lt  div gt  x000D     lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

You can control radio button s size with css style   style  height 35px  width 35px    This directly controls the radio button size    lt input type  radio  name  radio  value  value  style  height 35px  width 35px  vertical-align  middle   gt

User · Answer

You can also use the transform property  with required value in scale   input type radio  transform scale 2

User · Answer

Here s one approach  By default the radio buttons were about twice as large as labels   See CSS and HTML code at end of answer     Safari  10 0 3      Chrome  56 0 2924 87      Firefox  50 1 0      Internet Explorer  9  Fuzziness not IE s fault  hosted test on netrenderer com       CSS    sortOptions  gt  label       font-size           8px      sortOptions  gt  input type radio        width               10px      height              10px      HTML    lt div class  rightColumn  gt Answers      lt span class  sortOptions  gt           lt input type  radio  name  answerSortList  value  credate   gt           lt label for  credate  gt Creation lt  label gt            lt input type  radio  name  answerSortList  value  lastact   gt           lt label for  lastact  gt Activity lt  label gt            lt input type  radio  name  answerSortList  value  score   gt           lt label for  score  gt Score lt  label gt            lt input type  radio  name  answerSortList  value  upvotes   gt           lt label for  upvotes  gt Up votes lt  label gt            lt input type  radio  name  answerSortList  value  downvotes   gt           lt label for  downvotes  gt Down Votes lt  label gt            lt input type  radio  name  answerSortList  value  accepted   gt           lt label for  downvotes  gt Accepted lt  label gt        lt  span gt   lt  div gt

User · Answer

Resizing the default widget doesn   t work in all browsers  but you can make custom radio buttons with JavaScript  One of the ways is to create hidden radio buttons and then place your own images on your page  Clicking on these images changes the images  replaces the clicked image with an image with a radio button in a selected state and replaces the other images with radio buttons in an unselected state  and selects the new radio button   Anyway  there is documentation on this subject  For example  read this  Styling Checkboxes and Radio Buttons with CSS and JavaScript

User · Answer

A solution which works quite well is described right here  https   developer mozilla org fr docs Web HTML Element Input radio The idea is to use the property  appearance   which when sets to none allows to change the width and height of the radio button  The radio buttons are not blurry  and you can add other effect like transitions and stuff  Here s an example   input     -webkit-appearance  none    -moz-appearance  none    appearance  none     border-radius  50     width  16px    height  16px     border  2px solid  999    transition  0 2s all linear    margin-right  5px     position  relative    top  4px     input checked     border  6px solid black    outline  unset  important    I added this one for Edge  chromium  support       The only drawback is that it is not supported yet on IE  Here s a GIF  with a not so good rendering  below to give an idea of what can be achieved  you will get way better results on an actual browser   And the plunker   https   plnkr co plunk 1W3QXWPi7hdxZJuT

User · Answer

x000D   x000D   lt  DOCTYPE html gt  x000D   lt html lang  en  gt  x000D   lt head gt  x000D     lt title gt Bootstrap Example lt  title gt  x000D     lt meta charset  utf-8  gt  x000D     lt meta name  viewport  content  width device-width  initial-scale 1  gt  x000D     lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  gt  x000D     lt script src  https   ajax googleapis com ajax libs jquery 3 2 1 jquery min js  gt  lt  script gt  x000D     lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  gt  lt  script gt  x000D     lt style gt  x000D  input type  radio     x000D      -ms-transform  scale 1 5      IE 9    x000D      -webkit-transform  scale 1 5      Chrome  Safari  Opera    x000D      transform  scale 1 5   x000D    x000D     lt  style gt  x000D   lt  head gt  x000D   lt body gt  x000D   x000D   lt div class  container  gt  x000D     lt h2 gt Form control  inline radio buttons lt  h2 gt  x000D     lt p gt The form below contains three inline radio buttons  lt  p gt  x000D     lt form gt  x000D       lt label class  radio-inline  gt  x000D         lt input type  radio  name  optradio  gt Option 1 x000D       lt  label gt  x000D       lt label class  radio-inline  gt  x000D         lt input type  radio  name  optradio  gt Option 2 x000D       lt  label gt  x000D       lt label class  radio-inline  gt  x000D         lt input type  radio  name  optradio  gt Option 3 x000D       lt  label gt  x000D     lt  form gt  x000D   lt  div gt  x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

This works fine for me in all browsers    inline style for simplicity       lt label style  font-size 16px   gt       lt input style  height 1em  width 1em   type  radio  gt       lt span gt Button One lt  span gt   lt  label gt    The size of both the radio button and text will change with the label s font-size

User · Answer

Not directly  In fact  form elements in general are either problematic or impossible to style using CSS alone  the best approach is to    hide the radio button using javascript  Use javascript to add display HTML that can be styled how you like e g   Define css rules for a selected state  which is triggered by adding a class  selected  to yuor span  Finally  write javascript to make the radio button s state react to clicks on the span  and  vice versa  to get the span to react to changes in the radio button s state  for when users use the keyboard to access the form   the second part of this can be tricky to get to work across all browsers  I use something like the following  which also uses jQuery  I avoid adding extra spans too by styling and applying the  selected  class directly to the input labels     javascript  var labels      ul radioButtons  delegate  input    keyup   function        keyboard use         if  this checked                select   this  parent                      find  label   bind  click   function  event      mouse use         select   this             function select el        labels removeClass  selected        el addClass  selected        html   lt ul class  radioButtons  gt       lt li gt           lt label for  employee1  gt              employee1              lt input type  radio  id  employee1  name  employee    gt           lt  label gt       lt  li gt       lt li gt           lt label for  employee2  gt              employee1              lt input type  radio  id  employee2  name  employee    gt           lt  label gt       lt  li gt   lt  ul gt

User · Answer

Directly you can not do this   As per my knowledge    You should use images to supplant the radio buttons  You can make them function in the same manner as the radio buttons inmost cases  and you can make them any size you want

[html] How to change the size of the radio button using CSS?

Examples related to html

Examples related to css

Examples related to radio-button