CODEWITHSUNDEEP
htmlcssformsplaceholder
narue1992
narue1992

Reputation: 351

Line Height for placeholder in Input won't move to top

I have been trying to play with line-height, formatting input for all browsers, padding, vertical-align and so forth but my placeholder still is in the middle of the box. Any suggestions?

I tried testing my code within jsfiddle to see if maybe it's just my css file, however; the results are the same.

http://jsfiddle.net/f0o4bcnv/

#postdoc {
   background-color: gray;
   width: 780px;
   height: 500px;
   margin-right: auto;
   margin-left: auto;
   border: 1px solid black;
   margin-top: 30px;
   margin-left: 30px;
   padding-top: 30px;
   float: right;
 }
 #postdoc label {
   float: left;
   width: 200px;
   text-align: right;
   margin-right: 10px;
   padding-left: 10px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   -o-text-overflow: ellipsis;
   font-size: 25px;
   margin-bottom: 30px;
   margin-left: 20px;
 }
 #postdoc input[type="text"] {
   margin-bottom: 30px;
   height: 300px;
   width: 500px;
   font-size: 20px;
   margin-left: 10px;
   box-shadow: 0 0 5px black;
   vertical-align: top;
   /*padding-top: 0;*/
   /*line-height: normal;*/
   /*line-height: none;*/
   /*vertical-align: top;*/
   /*-webkit-input-placeholder: line-height: 1.5em;
	-moz-placeholder: line-height: 1.5em;
	-moz-placeholder: line-height: 1.5em;
	-ms-input-placeholder: line-height: 1.5em;*/
 }
 #postdoc input[type="file"] {
   margin-bottom: 30px;
   height: 50px;
   width: 500px;
   font-size: 20px;
   margin-left: 10px;
   box-shadow: 0 0 5px black
 }
 #postdoc input[type="submit"] {
   margin-bottom: 30px;
   height: 45px;
   width: 250px;
   font-size: 30px;
   margin-right: 100px;
   float: right;
   background-color: #4EA24E;
   color: blue;
   border-radius: 5px;
   text-shadow: 0 0 10px yellow;
   box-shadow: 0 0 10px black;
   font-family: Rockwell, 'Courier Bold', serif;
 }
 #postdoc input[type="submit"]:hover {
   color: gold;
 }
<!DOCTYPE html>

<html>


<head>
  <link rel="stylesheet" href="prostylesheet.css" type="text/css">

  <meta http-equiv="X-UA-Compatible" content="IE=80" />
</head>


<body>
  <h1 class="name"><font color = "#3399FF"> Prog-Assist |  </font><font size = "12" font color = "#4EA24E"> Programs Deployed</font></h1>

  <div id="header">
    <div id="gradient">
      <div class="nav">

        <!-- container-fluid gives full width container of whole viewport -->

        <div class="container-fluid">


          <ul id="nav1" class="text-left">
            <li><a href="main.html"><strong>Home</a>
            </li>
            <li><a href="tech.html">Technologies</a>
            </li>
            <li><a href="programsPage.html">Programs</a>
            </li>
            <li><a href="#">Blog</strong></a>
            </li>
          </ul>

          <ul id="nav2" class="text-right">
            <li><a href="#"><strong>Sign In</a>
            </li>
            <li><a href="#">Contact</strong></a>
            </li>
          </ul>

        </div>
        <!-- end container-fluid-->

      </div>
      <!--end nav-->
    </div>
  </div>
  <!-- end header -->


  <form id="postdoc" action="upload.php" method="POST" enctype="multipart/form-data">

    <label>Comment:</label>
    <input type="text" name="comment" placeholder="Comments">
    <br>

    <label>Text Document:</label>
    <input type="file" name="documentfile" />
    <br>

    <input type="submit" name="submit" value="Post comment" class="button">

  </form>


</body>

</html>

Upvotes: 0

Views: 1476

Answers (3)

Leonardo Delfino
Leonardo Delfino

Reputation: 1498

You should use textarea instead of input.

Look this fiddle: 

<textarea name="comment" placeholder="Comments"></textarea>

http://jsfiddle.net/f0o4bcnv/4/

To style the placeholder you can also use this css code:

::-webkit-input-placeholder { /* WebKit browsers */
  color: red;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: red;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: red;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
  color: red;
}

Note that only works on newer browsers.

Upvotes: 1

Lu&#237;s P. A.
Lu&#237;s P. A.

Reputation: 9739

For this cases (multiline) you should use textarea:

<textarea style="height: 500px; width: 100%;">
 Comments
</textarea>

Note: Input element only support single line.

Upvotes: 4

jmore009
jmore009

Reputation: 12923

I don't have an actual explanation for this. My guess would be the height distibutes evenly from top to bottom so the text sits in the middle. A solution would be to use padding instead:

#postdoc input[type="text"] {
   margin-bottom: 30px;
   /*height: 300px*/  //remove
   width: 500px;
   font-size: 20px;
   margin-left: 10px;
   box-shadow: 0 0 5px black;
   padding: 0 0 50px; //add
}

FIDDLE

But if this is not for cosmetics and you're looking to let a user type a block of text, you should use <textarea></textarea> instead of <input/>.

Upvotes: 1

Related Questions