CODEWITHSUNDEEP
htmlcss
Blue Duck
Blue Duck

Reputation: 56

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

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!

Upvotes: 0

Views: 57

Answers (4)

rortan
rortan

Reputation: 58

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>

Upvotes: 1

Anton
Anton

Reputation: 8538

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>

Upvotes: 1

PHP Geek
PHP Geek

Reputation: 4033

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;
}

Upvotes: 0

Timothy Alexis Vass
Timothy Alexis Vass

Reputation: 2705

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

Upvotes: 0

Related Questions