HTML/CSS elements don't looks precisely in needed position

user_16934467 0
Viewed 68

Made custom checkbox styles. But in different viewport widths dots inside of circles looks in a different position.

enter image description here enter image description here

This is how it looks in one viewport width and another image shows how it looks in another viewport. In all cases, the radius of elements doesn't change. Here you can see the code that I use for the WordPress website.

Is there some way to make dots stable in any viewports?

input {
    &[type="radio"] {
        &:checked, &:not(:checked) {
            position: absolute;
            left: -9999px;

            & + label {
                position: relative;
                padding-left: 28px;
                cursor: pointer;
                line-height: 20px;
                display: inline-block;
                color: #666;

                &::before {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 16px;
                    height: 16px;
                    border: 1px solid rgba(62, 62, 62, 0.5);
                    border-radius: 100%;
                    background: #fff;
                }
                &::after {
                    content: '';
                    width: 10px;
                    height: 10px;
                    background: $theme_color;
                    position: absolute;
                    top: 3px;
                    left: 3px;
                    border-radius: 100%;
                    -webkit-transition: all 0.2s ease;
                    transition: all 0.2s ease;
                }
            }
        }
        &:not(:checked) {
            & + label {
                &::after {
                    opacity: 0;
                    -webkit-transform: scale(0);
                    transform: scale(0);
                }
            }
        }
        &:checked {
            & + label {
                &::after {
                    opacity: 1;
                    -webkit-transform: scale(1);
                    transform: scale(1);
                }
            }
        }
    }
}
<form action="#">
  <p>
    <input type="radio" id="test1" name="radio-group" checked>
    <label for="test1">Apple</label>
  </p>
  <p>
    <input type="radio" id="test2" name="radio-group">
    <label for="test2">Peach</label>
  </p>
  <p>
    <input type="radio" id="test3" name="radio-group">
    <label for="test3">Orange</label>
  </p>
</form>

css html
1 Answers

Add display: flex to the <p> elements to prevent the label text wrapping below the radio button.

p{
    display: flex;
}
form{
    width: 150px;
    background-color: #ddd;
    padding: 1rem;
}
<form action="#">
        <p>
            <input type="radio" id="test1" name="radio-group" checked>
            <label for="test1">Apple</label>
        </p>
        <p>
            <input type="radio" id="test2" name="radio-group">
            <label for="test2">This is some long piece of text that might wrap on smaller devices</label>
        </p>
        <p>
            <input type="radio" id="test3" name="radio-group">
            <label for="test3">Orange</label>
        </p>
    </form>

user_52071720
Related