Increase size of Checkbox


#1

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.


#2

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.


#3

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

https://community.unbounce.com/unbounce/topics/how_can_i_increase_the_size_of_checkboxes_using_css


#4

Have you found anything that works?


#5

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 :slight_smile:


#6

Thank you. The CSS code worked perfectly!


#7

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

Pasted it into style sheet


#8

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?