# P5js change checkbox size

**URL:** <https://discourse.processing.org/t/p5js-change-checkbox-size/1567>\
**Category:** p5.js\
**Created:** [July 7, 2018, 12:39am UTC](https://discourse.processing.org/t/p5js-change-checkbox-size/1567 "2018-07-07T00:39:56Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Grimtin10](https://avatars.discourse-cdn.com/v4/letter/g/e47c2d/32.png) [@Grimtin10](https://discourse.processing.org/u/Grimtin10)\
**Post date:** [July 7, 2018, 12:39am UTC](https://discourse.processing.org/t/p5js-change-checkbox-size/1567/1 "2018-07-07T00:39:56Z")

</div>

I’m using the .size() function but it isn’t doing anything. I need my checkbox to be bigger, any help?

-Grim

---

<div class="post-metadata">

**Author:** ![behreajj](https://avatars.discourse-cdn.com/v4/letter/b/b5a626/32.png) [@behreajj](https://discourse.processing.org/u/behreajj)\
**Post date:** [July 7, 2018, 11:26am UTC](https://discourse.processing.org/t/p5js-change-checkbox-size/1567/2 "2018-07-07T11:26:41Z")

</div>

Looks like the `p5.dom` library creates a `div` which contains an `input` and a `label` when you call `createCheckbox`. You can access the style of the input element with the following

```auto
function setup() {
	noCanvas();
	const checkbox = createCheckbox('label', false);
	const box = checkbox.elt.getElementsByTagName('input')[0];
	box.style.width = '50px';
	box.style.height = '50px';

    // Alternative
	box.style.transform = 'scale(2)';
}

```

Styling may be inconsistent across browsers, though. You can see [MDN](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms) and [W3 Schools](https://www.w3schools.com/howto/howto_css_custom_checkbox.asp) for more information.