html - 如何垂直顶部对齐 INPUT 文本元素中的文本?

标签 html css

我有一个高大的 INPUT (type=text) 元素,其大小为 100%。包含元素具有特定高度(这是动态的)。

我想要的是能够将文本放在 INPUT 元素的顶部。我见过 few answers使用填充使其垂直居中,但我无法将文本放置在元素的顶部。我无法设置元素的高度。

示例 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。

谢谢 戴夫

最佳答案

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

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

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

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

关于html - 如何垂直顶部对齐 INPUT 文本元素中的文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27249438/

相关文章:

html - 在明确放置的行上偏移 CSS 网格元素

css - 我的媒体查询在我的 Android 设备上不起作用

html - 如何动态定位绝对div?

javascript - JS/JQuery - 选中所有复选框

javascript - 单击按钮后隐藏元素

javascript - 为什么 iOS 的滚动事件不能使元素可见?

javascript - 顶部 div 的动画位置创建空间

html - 彼此相邻的按钮

html - 如何在悬停时使按钮内的文本透明?背景应该保持不变

css - CSS Sprite 图像是否必须在每个元素之间有 X 量的空间?