如何使INPUT文本元素中的文本垂直上对齐？

Question

我有一个很高的INPUT（类型=文本）元素，其大小为100％。 包含元素具有特定的高度（动态的）。

我想要的是能够将文本放在INPUT元素的顶部。 我已经看到一些答案使用填充将其垂直居中，但我无法将其放置在元素顶部。 我无法设置元素的高度。

HTML示例（或JSFiddle ）：

<body>
<div class="outer">
<input type="text" value ="textcontent"></input>
</div>
</body>

和CSS：

body { background-color:gray;}

.outer {
    height:480px;
    background-color:pink;
    margin-top:100px;
}

input {
    height:100%;
    background-color:lightgray;
    padding-top:0px;
    line-height:100px;
}

可以在不设置元素高度的情况下完成此操作吗？ 我需要支持的浏览器：Chrome，FF，IE9和IE11。

谢谢戴夫

Answer 1

如果您只想要输入元素并实现此目的，请设置padding-bottom而不是height。

设置高度后，默认情况下，文本将显示在元素的中间。

input {
  padding-bottom: 462px;
  background-color:lightgreen;   
}

http://jsfiddle.net/yf5f82vx/1/

Answer 2

我建议您使用在文本输入中插入的textarea。

这样，文本将从顶部开始，如果其字符多于宽度，则将自动换行。

检查下面的前

小提琴的例子

'<body>
 <div class="outer">
 <textarea >textcontent</textarea>
 </div>
 </body>'

'body { background-color:gray;}

.outer {
height:480px;
background-color:pink;
margin-top:100px;
overflow:hidden;
}

textarea {
background-color: lightgray;
border: 1px solid #ccc;
box-sizing: border-box;
height: 100%;
line-height: 50px;
max-height: 100%;
padding-top: 0;
resize: none;
}'

如何使INPUT文本元素中的文本垂直上对齐？

问题描述

2 个解决方案

解决方案1
1 已采纳 2014-12-02 12:39:50

解决方案2
0 2014-12-02 13:18:05

如何使INPUT文本元素中的文本垂直上对齐？

问题描述

2 个解决方案

解决方案1 1 已采纳 2014-12-02 12:39:50

解决方案2 0 2014-12-02 13:18:05

解决方案1
1 已采纳 2014-12-02 12:39:50

解决方案2
0 2014-12-02 13:18:05