How can I align the placeholder in the input field to the top left?

Question

I want to align my placeholder to the upper left corner, but no matter what I tried, I couldn't do it. Unfortunately, other sources didn't help me either.

There is an answer to this question, but I couldn't find a source that does it without using <div>.

Flexbox used.

<div class="inputs">
     <input class="name" name="name" type="text" placeholder="Name">
     <input class="mail" name="mail" type="text" placeholder="E-mail">
     <input class="message" name="message" type="text" placeholder="Please enter your message">
</div>

This is my css code. I tried to keep the placeholder in the upper left corner.

input[type=message]::placeholder {
    left: 0px;
    top: 0;
    font-size: 20px;
    vertical-align: 0;
  }

Answer 1

The best way to write message using . you dont have to set placeholder at top left in textarea element.

Answer 2

When input have specified height, following code should work:

HTML:

 <input class="name" name="name" type="text" placeholder="Name">
 <input class="mail" name="mail" type="text" placeholder="E-mail">
 <input class="message" name="message" type="text" placeholder="Please enter your message">

CSS:

input {
  height: 50px;
}
input::-webkit-input-placeholder { 
  position:absolute;
  left: 0px;
  top: 0px;
  font-size: 20px; 
}

Answer 3

Technically, you can't position pseudo elements using the top, right, bottom, and left properties like you're trying to. Top left for a placeholder is definitely not possible (maybe I'm wrong), but if you want to align the place holder to the left, center, or right, you can always use text align.

<!--HTML-->
<input class="name" name="name" type="text" placeholder="Name">

/*css*/
input::-webkit-input-placeholder { 
text-align: center; 
}

I am assuming you want to have a large input field with the text at the top left corner. If so, the element you are looking for is not the <input> element but the Text area <textarea></textarea> element. This produces a large text field, and you do not have to position the placeholder. It is positioned at the top left by default. To shift the placeholder to the center or the right, you can just use the text align property.

Hope this helps! Good luck!