Increase size of Checkbox

  • 2 August 2016
  • 9 replies
  • 48 views

Is it possible to increase the size of the checkbox and the checkbox choice font with CSS? I am using flexible form fields and the checkboxes/values are really small.


9 replies

That’s AMAZING ROB!.. for anyone, if you change “checkbox” to “radio” you can change “radio buttons” size… GOOD!

Thanks Rob…after 4 hours I was able to figure out how to wrap the code in a style tag for sizing the button (i used radio)… for the life of me I can not get the spacing down…what do I wrap that in? can you please type out exactly what I’ll have to do for the radio button forms? Thanks So much.

Userlevel 6

Hi @jcasson It’s hard to say without having a look at the page. Off the top of my head though, did you wrap the above code in tags when adding it to the stylesheet tab?

Hi this isn;t working for me, what could i be doing wrong?

Pasted it into style sheet

Thank you. The CSS code worked perfectly!

Userlevel 6

This is possible using some CSS. The ‘2’ in the code below represents the size of the checkbox. 

input[type=checkbox] { 
  transform: scale(2) !important;
  }

It’s not the prettiest solution the bigger you go as it’s scaling up what’s already on the page. You’ll also need to adjust the spacing between the checkboxes and labels to account for the bigger size. So you’ll need one more CSS rule to make that happen:

div.lp-pom-root .lp-pom-form-field .option  {   
   margin-bottom: 20px !important; 
  }

You’ll need to play around with it to get the sizing and spacing to your liking. But this will work in increasing the size of the boxes 🙂

Have you found anything that works?

Also, I’m not sure if this is still relevant, but take a look:

/topics/how_can_i_increase_the_size_of_checkboxes_using_css

I was curious about this too. I’m pretty sure it’s a custom code thing. I have some coders that I use if you need references.

Reply