I changed my textbox size now my textbox's text position is not correct

Question

This is how my texbox

This is how I wanted it to look like

This is my HTML script

body {
    background-color: grey;
}

#myquestion {
    background-color: white;
    border-radius: 1.3mm;
    border-top: grey;
    border-left: grey;
    height: 70mm;
    width: 100mm;
    }

#mybutton {
    background-color: lightblue;
    border-radius: 1.3mm;
    border-right: grey;
    border-bottom: grey;
}

    <label>Enter your question:</label><br>
    <input type="text" id="myquestion"><br>
    <button type="button" id="mybutton">Submit</button>

Please help me fix this. I really want to finish my project today since it's a really easy project but I'm new at HTML and CSS and JavaScript so I really hope you can help me!

You can use tag like here https://stackoverflow.com/questions/6262472/multiple-lines-of-input-in-input-type-text — Gamer In The Game, Jul 24 '21 at 12:57
You can use `textarea` as @GamerInTheGame mentioned. Or if you still wanna use input, you can use a `pseudo class` to show the `placeholder` text inside the input any place you want by providing `position absolute` — Abin Thaha, Jul 24 '21 at 13:07

score 1 · Answer 1 · answered Jul 24 '21 at 13:08

body {
    background-color: grey;
}

#myquestion {
    background-color: white;
    border-radius: 1.3mm;
    border-top: grey;
    border-left: grey;
    padding: 8px;
    width: 300px;
    }

#mybutton {
    background-color: lightblue;
    border-radius: 1.3mm;
    border-right: grey;
    border-bottom: grey;
}

<label>Enter your question:</label><br>
    <input type="text" id="myquestion"><br>
    <button type="button" id="mybutton">Submit</button>

score 1 · Accepted Answer · answered Jul 24 '21 at 13:09

1

That is because the default value of an input tag is vertical-align: middle, to make what you want just change

<input type="text" id="myquestion">

to

<textarea type="text" id="myquestion"></textarea>

answered Jul 24 '21 at 13:09

rortan

58
6

score 0 · Answer 3 · answered Jul 24 '21 at 13:06

0

Simply change your <input> element into a multi-line <textarea>.

answered Jul 24 '21 at 13:06

Timothy Alexis Vass

2,526
2
11
30

score 0 · Answer 4 · answered Jul 24 '21 at 13:07

Give input box a id like

   <label>Enter your question:</label><br>
    <div id="myquestion1"><input type="text" id="myquestion"></div><br>
    <button type="button" id="mybutton">Submit</button>

and replace your css with the following

body {
    background-color: grey;
}
 #myquestion1 {
    background-color: white;
    border-radius: 1.3mm;
    border-top: grey;
    border-left: grey;
    height: 70mm;
    width: 100mm;
}
input#myquestion {
    background-color: white;
    border-radius: 1.3mm;
    border-top: grey;
    border-left: grey;
    border-color: #fff;
    width: 100%;
}



#mybutton {
    background-color: lightblue;
    border-radius: 1.3mm;
    border-right: grey;
    border-bottom: grey;
}

I changed my textbox size now my textbox's text position is not correct

4 Answers4