Custom checkbox stretches vertically when text wraps

Question

I have a styled checkbox that is the child of a container along with some text. The reason the checkbox and text are children of a parent is so that they can sit next to each other and be centered vertically on the UI. This has worked fine for me; however, I've noticed that the checkbox starts to change from a perfect circle into more of an oval as text starts to wrap into multiple lines (on mobile the text is two lines long and on desktop it is only one line). How could I fix this so that the checkbox does not stretch as the text wraps into multiple lines? Below is my html and styling, thank you.

 .opt-in { display: flex; align-items: center; color: #f4a11e; } input[type='checkbox'] { position: relative; margin: 17px 15px 0 0; cursor: pointer; width: 20px; height: 20px; -webkit-appearance: none; background: transparent; border: 1px solid #f4a11e; outline: none; border-radius: 50%; transition: 0.5s; } input[type='checkbox']:before { content: ''; position: absolute; top: 45%; left: 50%; width: 4px; height: 10px; opacity: 0; border-right: 1px solid #f4a11e; border-bottom: 1px solid #f4a11e; transform: translate(-50%, -50%) rotateZ(40deg); transition: 0.2s; } input:checked[type='checkbox']:before { opacity: 1; }

 <div class="opt-in"> <input type="checkbox" v-model="optIn" id="checkbox" /> <label for="checkbox">Opt-in to receive the latest cloud insights and industry deep dives.</label> </div>

Answer 1

In the CSS code in the input[type='checkbox'] {} section, try using min-width: 20px; rather than width: 20px; .

Worked for me in a test implementation with copy/pasted code although I had to set max-width in the properties of the opt-in div to test it.

I don't have a technical explanation but I believe it has something to do with the relative position or the display: flex overriding the specified width/height in pixels.