Adjust text input position in input box

Question

How do I adjust the text input position in the input box? I did do input[type=text] but it messes up my input box's position completely. I did change my ::placeholder left margin a little bit in case if you want to know.

HTML & CSS

.registerbox {
    width: 500px;
    height: 450px;
    background: rgba(255, 255, 255, 0.7);
    margin: 10px auto;
    border-radius: 20px;
    box-shadow: 0 0 40px 10px rgba(0, 0, 0, 0.6);
    color: white;
}


.inner-registerbox {
    position: relative;
    width: 100%;
    height: 100%;
}

.registerbox-front {
    position: absolute;
    height: 100%;
    width: 100%;
    padding: 55px;
    box-sizing: border-box;
    border-radius: 14px;
}

input label {
    display: block;
}

.registerbox h2 {
    text-align: center;
    font-size: 25px;
    font-weight: normal;
    margin-bottom: 20px;
    margin-top: 0;
    color: black;
}

.input-box2 {
    width: 95%;
    background: transparent;
    border: 1px solid black;
    height: 32px;
    border-radius: 5px;
    padding: 0 0px;
    box-sizing: border-box;
    outline: none;
    text-align: left;
    color: black;
    display: table;
    margin-top: 2px;
    margin-bottom: 15px;
}

.input-box3 {
    width: 105%;
    background: transparent;
    border: 1px solid black;
    height: 32px;
    border-radius: 5px;
    padding: 0 0px;
    box-sizing: border-box;
    outline: none;
    text-align: left;
    color: black;
    display: table;
    margin-top: 2px;
    margin-bottom: 15px;
}

.registerbox-front ::placeholder {
    padding-left: 10px;
}

.box-firstline, .box-secondline {
    margin-top: 10px
}

<body>
<div class="registerbox">
    <div class="inner-registerbox">
        <div class="registerbox-front">
        <h2>BORANG PENDAFTARAN MURID</h2>
        <form>
        <section>
        <div class="box-firstline">
            <div style="float:left;margin-right:25px;"> 
            <label for="idmurid">ID Murid</label> <br /> 
            <input type="text" name="idmurid" class="input-box2"  placeholder="ID Murid" required>
            </div>

            <div style="float:left;">
            <label for="namamurid">Nama Murid</label> <br /> 
            <input type="text" name="namamurid" class="input-box3"  placeholder="Nama Murid" required>
            </div>
        </div>
       
        <br style="clear:both;" />
        </section>
        <div class="box-secondline">
            <div style="float:left;margin-right:25px;"> 
            <label for="namakelas">Nama Kelas</label> <br /> 
            <input type="text" name="namakelas" class="input-box2"  placeholder="Nama Kelas" required>
            </div>

            <div style="float:left;">
            <label for="katalaluan_murid">Kata Laluan</label> <br /> 
            <input type="password" name="katalaluan_murid" class="input-box3"  placeholder="Katalaluan" required>
            </div>
        <br style="clear:both;" />
        </div>

    </div>
</div>
</body>

Jack Campbell · Accepted Answer · 2021-03-31 04:14:09Z

I took the code you posted, removed the ::placeholder padding and then added

input[type="text"] {
    padding-left: 10px;
}

input[type="password"] {
    padding-left: 10px;
}

And it adjusted the the text to match the placeholder.

Here is the full CSS:

.registerbox {
    width: 500px;
    height: 450px;
    background: rgba(255, 255, 255, 0.7);
    margin: 10px auto;
    border-radius: 20px;
    box-shadow: 0 0 40px 10px rgba(0, 0, 0, 0.6);
    color: white;
}

input[type="text"] {
    padding-left: 10px;
}

input[type="password"] {
    padding-left: 10px;
}


.inner-registerbox {
    position: relative;
    width: 100%;
    height: 100%;
}

.registerbox-front {
    position: absolute;
    height: 100%;
    width: 100%;
    padding: 55px;
    box-sizing: border-box;
    border-radius: 14px;
}

input label {
    display: block;
}

.registerbox h2 {
    text-align: center;
    font-size: 25px;
    font-weight: normal;
    margin-bottom: 20px;
    margin-top: 0;
    color: black;
}

.input-box2 {
    width: 95%;
    background: transparent;
    border: 1px solid black;
    height: 32px;
    border-radius: 5px;
    padding: 0 0px;
    box-sizing: border-box;
    outline: none;
    text-align: left;
    color: black;
    display: table;
    margin-top: 2px;
    margin-bottom: 15px;
}

.input-box3 {
    width: 105%;
    background: transparent;
    border: 1px solid black;
    height: 32px;
    border-radius: 5px;
    padding: 0 0px;
    box-sizing: border-box;
    outline: none;
    text-align: left;
    color: black;
    display: table;
    margin-top: 2px;
    margin-bottom: 15px;
}

.box-firstline, .box-secondline {
    margin-top: 10px;
}

Not only did you fix it, you also fix my width problem! Thank you kind sir!

Collectives™ on Stack Overflow

Adjust text input position in input box

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related