我正在尝试垂直对齐文本输入框的占位符。
我有 ::--webkit
和 :--moz
规则,他们正在为其他样式工作,但不是垂直对齐...
我试过了 vertical-align: middle;
在 webkit 规则中,在 .input
下本身。我也试过 line-height: <same as the input box height>
谁能看到我遗漏的简单内容??
谢谢!!
最佳答案
一个选项是更改输入的字体格式占位符(占位符继承格式)。
https://jsfiddle.net/rwh6hkc6/
html, body {
margin: 0;
}
.email.input {
text-indent: 40px;
font-family: "HelveticaNeue-Ultra-Light", "Helvetica Neue Ultra Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
width: 400px;
border: none;
background-color: #FFCF6B;
font-size: 1.8em;
font-weight: 100;
padding: 10px 0;
}
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #B1B1B1;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #B1B1B1;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #B1B1B1;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #B1B1B1;
}
<div class="centered">
<div class="input">
<input type="text" class="email input" name="email" placeholder="enter your email">
</div>
</div>
关于CSS 垂直对齐占位符文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39755440/