Html - Get input button to start of container

Forgechemist
May 24, 2024
221 views
2 votes
3 Answers

.dark-light {
    display: flex;
    gap: 0.75rem;
    border: #555555 solid;
    background-color: #555555;
    border-radius: 2rem;
    padding: 0.31rem;
    user-select: none;
    cursor: pointer;
    align-items: center;
    width: 3.8em;
}
.dark-light input {
    border-radius: 2rem;
    appearance: none;
    border: 0;
    width: 2.4rem;
    height: 2.4rem;
    position: absolute;
}

 <li> <div class="dark-light">
                    <input type="button">
                    <span class="light">☀️</span>
                    <span class="dark">🌙</span>
                </div></li>

i wanna get the input to the start of the container div , like to the left, how can i do it
html

<li> <div class="dark-light">
                    <input type="button">
                    <span class="light">☀️</span>
                    <span class="dark">🌙</span>
                </div></li>

css

.dark-light {
    display: flex;
    gap: 0.75rem;
    border: #555555 solid;
    background-color: #555555;
    border-radius: 2rem;
    padding: 0.31rem;
    user-select: none;
    cursor: pointer;
    align-items: center;
}
.dark-light input {
    border-radius: 2rem;
    appearance: none;
    border: 0;
    width: 2.4rem;
    height: 2.4rem;
    position: absolute;
}

i tried the justify content but it didnt worked , adding left property move it respective to the whole screen because i have absolute position, but i want it the go 100% left of the container

Tags: css html

Answers

Your element does not have left/top position, so it’s placed with the flow. Add left: 0

.dark-light {
    display: flex;
    gap: 0.75rem;
    border: #555555 solid;
    background-color: #555555;
    border-radius: 2rem;
    padding: 0.31rem;
    user-select: none;
    cursor: pointer;
    align-items: center;
    width: 3.8em;
}
.dark-light input {
    border-radius: 2rem;
    appearance: none;
    border: 0;
    width: 2.4rem;
    height: 2.4rem;
    position: absolute;

    left: 0;
}

 <li> <div class="dark-light">
                    <input type="button">
                    <span class="light">☀️</span>
                    <span class="dark">🌙</span>
                </div></li>

Missing position: relative; in .dark-light class.
In .dark-light input you can set position by left: -4px; or right: -4px;

.dark-light {
    display: flex;
    gap: 0.75rem;
    border: #555555 solid;
    background-color: #555555;
    border-radius: 2rem;
    padding: 0.31rem;
    user-select: none;
    cursor: pointer;
    align-items: center;
    width: 3.8em;
    position: relative; /* new row */
}
.dark-light input {
    border-radius: 2rem;
    appearance: none;
    border: 0;
    width: 2.4rem;
    height: 2.4rem;
    position: absolute;
    left: -4px; /* new variant 1 */
    /* right: -4px; */ /* new variant 2 */
}

    <li> <div class="dark-light">
        <input type="button">
        <span class="light">☀️</span>
        <span class="dark">🌙</span>
    </div></li>

It is because of the border and padding. If you remove the border and padding. It looks like:-

.dark-light {
        display: flex;
        gap: 0.75;
        background-color: #555555;
        border-radius: 2rem;
        padding: 0.31rem 0 0.31rem 0;
        user-select: none;
        cursor: pointer;
        align-items: center;
        width: 3.8em;
    }
    .dark-light input {
        border-radius: 2rem;
        appearance: none;
        border: 0;
        width: 2.4rem;
        height: 2.4rem;
        position: absolute;
    }

<li> <div class="dark-light">
        <input type="button">
        <span class="light">☀️</span>
        <span class="dark">🌙</span>
    </div></li>

But, you have to make the height and width 2rem because your border is .4rem.Now, it looks like:-

.dark-light {
        display: flex;
        gap: 0.75;
        background-color: #555555;
        border-radius: 2rem;
        padding: 0.31rem 0 0.31rem 0;
        user-select: none;
        cursor: pointer;
        align-items: center;
        width: 3.8em;
    }
    .dark-light input {
        border-radius: 2rem;
        appearance: none;
        border: 0;
        width: 2rem;
        height: 2rem;
        position: absolute;
    }

<li> <div class="dark-light">
        <input type="button">
        <span class="light">☀️</span>
        <span class="dark">🌙</span>
    </div></li>

Add ul or ol because without ul or ol there is invalid markup, and center the icons also. It will be better.

.dark-light {
        display: flex;
        gap: 0.75;
        background-color: #555555;
        border-radius: 2rem;
        padding: 0.31rem 0 0.31rem 0;
        user-select: none;
        cursor: pointer;
        position: relative;
        align-items: center;
        width: 3.8em;
    }
    .dark-light input {
        border-radius: 2rem;
        appearance: none;
        border: 0;
        width: 2rem;
        height: 2rem;
        position: absolute;
    }
    .center{
        justify-content: center;
    }

 <ul><li> <div class="dark-light">
        <input type="button">
        <span class="center"><span class="light">☀️</span>
        <span class="dark">🌙</span></span>
    </div></li></ul>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Get input button to start of container

Answers