Custom Checkboxes don't work in Safari on iPad. They also don't work in Firefox or Chrome on the same device

as mentioned above the css styles appear not to be applied to the checkboxes on iPad 10. Problem first discovered on safari, which then made me think that there might be some default browser styles which I couldn't overwrite yet, but since this problem also occurs in firefox and chrome on the same device it's more likely that the reason for this might be the iPad itself.

In detail:

• the checkboxes appear like this:

Safari/Firefox/Chrome on iPad 10

They hang above the text instead of being aligned in the center of the block. They also shrink in size depending on the size of the subsequent paragraph.

They should appear like this:

Firefox on Samsung Galaxy Tab S6 lite and Firefox on Windows PC

The CSS code for the checkboxes is as following:

`.input-container {
    display: flex;
    text-align: justify;
    hyphens: auto;
}

.checkboxes {
display: flex;
justify-content: left;
align-items: right;
vertical-align: middle;
word-wrap: break-word;
}`

In HTML:

<div class="input-container" 
     style="text-align:justify; hyphens:auto; width:60%; 
            margin-left:auto; margin-right:auto;">
      <input type="checkbox"/>
      <p>
         Anschließende Zentrifugation der Probe, Gegengewicht nicht vergessen! 8.000 rpm für 10 min.
      </p>
</div>

I already tried 'appearance: none;' or '-webkit-appearance: none;' to remove default browser styles as well as !important, put the css styles at the end of the stylesheet to avoid lastrule but nothing worked so far. Apple customer support could not help me with getting insight into default browser styles (I don't have access to a mac to connect the iPad with and use Webinspector...).

So here I am hoping that there might be someone who has any idea why the checkboxes don't appear properly on that iPad 10.

Bare with me if the code looks sloppy since I needed to learn some basic html only for this project.

Thank you in advance.