Question

我一直在尝试使用行高，格式化输入所有浏览器，填充，垂直对齐等等，但我的占位符仍然在框的中间。有什么建议吗？

我尝试在jsfiddle中测试我的代码，看看它是否只是我的css文件;结果是一样的。

#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>

Answer 1

对于这种情况（多线），你应该使用textarea：

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

注意：输入元素仅支持单行。

Answer 2

我对此没有实际的解释。我的猜测是从上到下均匀分布高度，所以文字位于中间。解决方案是使用padding代替：

#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

但如果这不适用于化妆品而且您希望让用户输入一段文字，则应使用<textarea></textarea>代替<input/>。

Answer 3

您应该使用textarea而不是输入。

看这个小提琴：

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

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

要设置占位符的样式，您还可以使用此css代码：

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

请注意，仅适用于较新的浏览器。

输入中占位符的行高不会移到顶部

3 个答案: