vendredi 15 septembre 2023

Is there a way to inspect the exact styling properties of checkboxes in Windows 11 and apply them as custom CSS Code while overwriting native styles?

This approach is intended to overwrite the iOS native styles for checkboxes while applying Windows' native styles instead. The problem that I want to address is that checkboxes on my page appear properly on Windows and Android but they have the wrong position and they seem to have adapting size depending on the container size on iOS devices no matter which Browser I'm using.

This is what it looks like on iOS:

This is what it looks like on Windows/Android (appearance I also want to apply on iOS devices)

This is the Code I'm using:

<div class="input-container" style="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>
  .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;
  }

I was not able to find the CSS Code for Windows' native checkbox styles yet. Is there a way to inspect them?




Aucun commentaire:

Enregistrer un commentaire