CODEWITHSUNDEEP
htmlinputtextareaplaceholder
Lil-Kim
Lil-Kim

Reputation: 133

HTML text area change position of placeholder

I want my text input area to be bigger but have the placeholder text in the top left corner. How do I accomplish this?

JSFiddle is here.

<form name="myForm" class="infocontent">
   <input data-role="none" type="email" class="inputEmail required" name="email" placeholder="EMAIL"/> </br></br>
   <input data-role="none" type="text" class="inputMessage messageHeight required" name="message"  placeholder="MESSAGE" style="width:400px; height:100px;"/> </br> </br>

   <div id="load"></div>
   <input data-role="none" type="submit" name="submit" class="submit" value="submit"/>
</form>

Upvotes: 3

Views: 8854

Answers (2)

jameandreu
jameandreu

Reputation: 11

I stumbled upon this problem now and I tried the solution @BlackHatSamurai gave but didn't work.

I'm putting it here in case someone is dumb as me and still finding the answer for this.

I assume what you are trying to do here is making a textarea, I tried using<input type="textarea" placeholder="Message"> but the placeholder is always in the middle. No matter how you style it, you can just style the placeholder with limited amount of properties see this link for more info link

And I found as I am writing this post that there is no such thing as <input type="textarea" , but the browser is still rendering it to the DOM as <input type="text">. So I got confused and spend hours debugging the wrong element. You can see this behavior in the snippet below

I solved this by just replacing the <input type="textarea" placeholder="Message"> with <textarea placeholder="Message"></textarea>. placeholder is set in top left corner of the element by default.

input[type="textarea"],
textarea {
display:block;
  width: 15rem;
  height: 15rem;
}
Input:<input type="textarea" placeholder="Message">
Textarea:<textarea placeholder="Message"></textarea>

Upvotes: 0

BlackHatSamurai
BlackHatSamurai

Reputation: 23483

You can do this with pseudo elements and css, but you have to do one for each browser:

::-webkit-input-placeholder { /* WebKit browsers */

    position: absolute; top: 0; left: 0;
    position:0 0;
    height: 100px;
    width:400px;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */

    position: absolute; top: 0; left: 0;
    position:0 0;
    height: 100px;
    width:400px;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */

    position: absolute; top: 0; left: 0;
    position:0 0;
    height: 100px;
    width:400px;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */

    position: absolute; top: 0; left: 0;
    position:0 0;
    height: 100px;
    width:400px;
}
<form name="myForm" class="infocontent">
        <input data-role="none" type="email" class="inputEmail required" name="email" placeholder="EMAIL"/> </br></br>
          <input data-role="none" type="text" class="inputMessage messageHeight required" name="message"  placeholder="MESSAGE" style="width:400px; height:100px;"/> </br> </br>

           <div id="load"></div>
           <input data-role="none" type="submit" name="submit" class="submit" value="submit"/>
          </form>

The above example will allow you to modify the placeholder code however you like with CSS.

Upvotes: 5

Related Questions