Search code examples
htmlcssinputborderpadding

How do I move user input inside text box?

I am trying to move the user input further to the right because the border intercepts with the text and doesn't make it look neat. I was trying to make it so there would be a whitespace before the text but I couldn't make it work. So if anyone knows how to fix this I would really appreciate it. Image Here:

enter image description here

Entire Code:

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>
            Welcome!
        </title>
    </head>
    <style>
        html {
            background-color: cadetblue;
            font-family: Blippo, fantasy;
        }
        .welcomes {
            font-size: 80px;
            font-weight: 900;
            margin-top: 10%;
            color: white;
        }
        .name {
            width: 38%;
            margin-left: 32%;
            height: 30px;
            border-radius: 25px;
            border-color: white;
            outline: none;
            caret-color: cadetblue;
        }
    </style>
    <body>
        <div class="welcomes">
            <center>
            Welcome!
            </center>
        </div>
        <br>
        <br>
        <input type="text" class="name" style="font-family: Blippo, fantasy; color: cadetblue; font-size: 25px;" placeholder=" Please Enter Your Name To Continue!">
    </body>
</html>
Solution

  • Use padding-left for the input tag.

    <html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>
            Welcome!
        </title>
    </head>
    <style>
        html {
            background-color: cadetblue;
            font-family: Blippo, fantasy;
        }
        .welcomes {
            font-size: 80px;
            font-weight: 900;
            margin-top: 10%;
            color: white;
        }
        .name {
            width: 38%;
            margin-left: 32%;
            height: 30px;
            border-radius: 25px;
            border-color: white;
            outline: none;
            caret-color: cadetblue;
        }
    </style>
    <body>
        <div class="welcomes">
            <center>
            Welcome!
            </center>
        </div>
        <br>
        <br>
        <input type="text" class="name" style="font-family: Blippo, fantasy; color: cadetblue; font-size: 25px; padding-left: 20px;" placeholder=" Please Enter Your Name To Continue!">
    </body>
</html>