1

I have looked through many Q&A here on Stackoverflow and other sources about how to make a larger checkbox. All solutions provided do not show a simple checkbox bigger.

There are many solutions. Many are from several years ago. All are different.

I am interested in creating checkboxes that are 2x or 3x larger on mobile device. In fact if they are larger on desktop browsers that is just fine also.

What is the best way to get a larger checkbox in 2016?

I don't want "weird" checkboxes where there is an funny looking check mark, or some "alternative checkmark".

Just a normal checkbox... but larger. Also... The text describing the checkbox should align properly.

Thanks

slindsey3000
  • 4,053
  • 5
  • 36
  • 56
  • Does setting the width and height of your checkboxes via CSS not work? – Hydrothermal Jul 25 '16 at 15:53
  • @Hydro That won't work. – nicael Jul 25 '16 at 15:53
  • Possible duplicate of [Checkboxes in web pages – how to make them bigger?](http://stackoverflow.com/questions/4137255/checkboxes-in-web-pages-how-to-make-them-bigger) – nicael Jul 25 '16 at 15:55
  • 1
    Take a look at this CSS3 CodePen example - https://codepen.io/bbodine1/pen/novBm – Josh Jul 25 '16 at 15:55
  • Specifically, [this](http://stackoverflow.com/a/22303413). – nicael Jul 25 '16 at 15:56
  • I used @Josh link and came up with this https://codepen.io/slindsey3000/pen/dXZwBj - The last one is nice and big. Now will it line up with text and labels? – slindsey3000 Jul 25 '16 at 20:06
  • Also... the person who suggested that my question is answered. No... I don't want a change in background color. I say clearly that I want a normal checkbox... just larger – slindsey3000 Jul 25 '16 at 20:13

2 Answers2

1

You can scale any html element with the transform scale... Checkbox is an HTML element, it can be scaled as well and you can specify different scales relative to different viewports in order to make the scaling compatible with the device it views on..

input[type=checkbox] 
{
 -ms-transform: scale(2); /* IE */
 -moz-transform: scale(2); /* FF */
 -webkit-transform: scale(2); /* Safari and Chrome */
 -o-transform: scale(2); /* Opera */
}
KAD
  • 10,972
  • 4
  • 31
  • 73
  • I currently use this approach but it throws alignment off. For example if my checkbox is the first element in a row, when you "scale up" it gets bigger in all directions. It even expands off the screen in situations where the checkbox is the all the way left. How can I use this and still make everything line up? – slindsey3000 Jul 25 '16 at 19:43
  • http://cappedin.com/parlay_bets/parlay_entry#event-746902 - I use scale for the checkboxes all the way down the page. They blow up outside of background. – slindsey3000 Jul 27 '16 at 15:05
  • This might fix that http://stackoverflow.com/questions/26481090/html-css-how-to-resize-checkboxes-without-overlapping – slindsey3000 Jul 27 '16 at 15:39
1

I would go with simple setting width/height plus -moz-appearance for firefox, and flexbox for aligning.

<div class="form-holder">
  <input type="checkbox" id="checkbox" />
  <label for="checkbox">This is label for checkbox</label>
</div>

@media all and (max-width: 600px) {
  input[type="checkbox"] {
    width: 25px;
    height: 25px;
  }  
}

@media all and (max-width: 320px) {
  input[type="checkbox"] {
    width: 40px;
    height: 40px;
  }  
}

.form-holder {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

demo fiddle

Bogdan Kuštan
  • 5,427
  • 1
  • 21
  • 30