Positioning checkbox offscreen

[AndrewTraub]

Given the following html:

Code: [Select]

<section class="userfeedback-widget">
    <label>
        <input class="flipper" type="checkbox"/>
        <svg viewBox="0 0 9 5">
            <path d="M0.598416 0H8.40158C8.66371 0 8.84517 0.128205 8.94599 0.384615C9.04681 0.621302 9.00648 0.828402 8.82501 1.00592L4.92343 4.82249C4.80245 4.94083 4.66131 5 4.5 5C4.33869 5 4.19755 4.94083 4.07657 4.82249L0.174988 1.00592C-0.00648104 0.828402 -0.0468075 0.621302 0.0540086 0.384615C0.154825 0.128205 0.336294 0 0.598416 0Z" fill="currentColor"></path>
        </svg>
    </label>
    ... other html here ...
</section>
And the following CSS:

Code: [Select]

.userfeedback-widget {
    position: fixed;
    right: 2.5em;
    bottom: 0;
    display: block;
    color: var(--color-text);
    background-color: var(--color-background);
    max-width: 20em;
    min-width: 20em;
    box-shadow: 0 -1px 3px 2px rgb(0 0 0 / 8%);
    padding: 0;
    transition: all .2s ease-in-out;
}

.userfeedback-widget > label {
    position: absolute;
    bottom: 100%;
    right: 1.5em;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    padding: 0.625em 1.75em 0.5625em;
    background-color: var(--color-background);
    color: inherit;
    border: none;
    box-shadow: 0 -1px 3px 2px rgb(0 0 0 / 8%);
}
What CSS rule would move the checkbox offscreen but not the svg?

When I try:

Code: [Select]

.flipper {
    position: absolute;
    left: -999px;
}
The SVG disappears too.

Thanks,

Andrew

[coothead]

Hi there  AndrewTraub,

does this help...

Full page View
https://codepen.io/coothead/full/VwBoPOR

Editor View
https://codepen.io/coothead/pen/VwBoPOR

coothead

[AndrewTraub]

Thanks!