如何防止占位符文本在大高度输入表单元素中垂直居中？

高度为100px的input type='text'元素中的占位符文本垂直居中。我希望它在顶部对齐。如何防止占位符文本在大高度输入表单元素中垂直居中？

Product.html

<div class="form-group"> 
      <label for="description">Description</label> 
      <input type="text" name="description" id="description" placeholder="Enter a new product description..." class="form-control" /> 
</div>

product.less

#description{ 
    height: 100px; 

    ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 
    vertical-align: top; 
    } 
    ::-moz-placeholder { /* Firefox 19+ */ 
    vertical-align: top; 
    } 
    :-ms-input-placeholder { /* IE 10+ */ 
    vertical-align: top; 
    } 
    :-moz-placeholder { /* Firefox 18- */ 
    vertical-align: top; 
    } 
}

我与服用伪选择了的拨弄10块，所以他们不编译到#description ::-webkit...，但没有奏效。我尝试过所有类型的垂直对齐组合，无法弄清楚。也许占位符psuedo选择器不正确的路径？我们使用bootstrap，但找不到任何会导致强制在占位符中垂直对齐的内容，或找不到任何可以实现顶级对齐占位符文本的bootstrappy方式。

编辑：没有更少的编译错误。我已经确认这些伪选择器正被编译到.css文件中。

编辑：我有一个脑屁，并试图建立一个大的文字区域的硬道路。 Textareas存在，使用这些，如果你发现自己在这里。

来源

2016-11-10 komali_2

的jsfiddle请。（对我来说，CSS更好，但你不需要）。 –

https://jsfiddle.net/5u83oL78/谢谢 –

请注意，我问这个问题的原因是因为我有一个巨大的brainfart，忘记了'textarea'存在https://developer.mozilla.org/en-US/ docs/Web/HTML/Element/textarea如果你正在尝试做我刚刚做的事情，那么最好使用'textarea'。 –

试试这个：

：占位图示是选择输入自己当它正在显示占位符文本。与::占位符相反，它占据了占位符文本的样式。

#description{ 
    height: 100px; 
} 

::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 
    position: relative !important; 
    transform:translateY(-220%) !important; 
    color:red !important; 
    } 
    input::-moz-placeholder { /* Firefox 19+ */ 
    vertical-align: top; 
    } 
    input::-ms-input-placeholder { /* IE 10+ */ 
    vertical-align: top; 
    }

在我的代码中，这个伪元素开始只对！important做出响应我们的样式。

https://jsfiddle.net/5u83oL78/2/

来源

2016-11-10 22:34:16

我接受了这个答案，因为它回答了问题 - “将占位符文本对齐到顶部”而不是添加填充。然而，请注意，与易卜拉欣的回答不同，输入区域本身保持在中间，这可能不是人们想要的。 –

使用填充：

input.form-control { 
    padding: 0px 12px 60px 12px; 
}

演示：https://jsfiddle.net/5u83oL78/3/

来源

2016-11-10 22:39:13 Ibrahim

这是从底部推动，但实际上并没有对齐顶部。 –

我接受了其他答案，因为从技术上讲，这不会在顶部对齐，而是使用硬编码的像素值推到顶部。然而，这种方法也会推动输入区域本身，所以输入文本也会出现顶部对齐。这看起来比其他答案好。 –

@ komali_2不用担心。我也投了其他答案。 – Ibrahim

如何防止占位符文本在大高度输入表单元素中垂直居中？

回答

相关问题