Text doesn't start from the left top of input text field

Question

I have an input field with a fixed height. The text is vertically centered, but I want it at the top left of the input.

CSS

.wideInput{
    text-ali         


        

Answer 1

As Pranay Rana said, your padding is causing the problem and his answer is correct. Additionally you can use shortcut propery for padding:

padding: 0 0.4rem 0.4rem 0;

This is the same as:

padding-left:0;
padding-top:0;
padding-bottom:0.4em;
padding-right: 0.4em;

It takes the values in clockwise order, so first top, right, bottom and then left. And if you want the text to be on multiple lines, use textarea instead of regular input[type=text].