Custom checkboxes exhibit weird page jumping

Design help Layout & Design
1

I have a form in which I have a series of checkboxes nestled inside a div with scrollbar.
When the checkboxes are custom, options at the bottom of the list (outside the div boundaries) cause the page to jump - it seems like it makes that checkbox stick to the top of the page.

When the checkboxes are default, it behaves as expected - no weird page jumps.

The last four items in the ‘location’ list demonstrate what I mean.
I’d use a Select instead, but having to ctrl-click to multi-select isn’t going to be intuitive for my users.
I’d leave the checkboxes as default - but the blue clashes terribly, and the boss isn’t going to like it not being the brand colour.

Does anyone have any advice? Thank you for your time!

Here is my site Read-Only: Webflow - den.org.au

2

Hi
You left last two checkboxes default you need to make them custom and when made that custom I do not found any scrolling glitch they are working fine:-
image
image

3

Hey, thanks for replying.
I left the last two checkboxes default on purpose, to demonstrate the scrolling behaviour.

I’ve taken a recording of the issue, hopefully this is clearer:

4

Hope you resolved this issue if not

Please remove “position absolute” from the input and make CSS changes if needed.
image