html - 输入字段 html css 的输入文本样式

Question

我有一个底部有一行的输入字段，很像教科书中的一行。我希望能够显示占位符文本以及用户在该行上方输入的文本。

我在这里做了一个 fiddle :http://jsfiddle.net/H7AVP/

这是我的 HTML 的样子:

<input type="text" placeholder="subscribe for early access" class="form-control email">

还有我的 CSS(没有针对这个问题进行跨浏览器优化):

.email::-webkit-input-placeholder { 
  font-family: 'Open Sans', sans-serif;
  font-size: 25px;
  padding-bottom:45px;
  margin-top:-10px;
}

input {
  background-color: #2980b9;
  outline: 0;
  border-bottom: 2px;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom-style: double;
  border-bottom-color: #34495e;
  height: 46px;
  width: 300px;
}

input:focus{
  outline:0;
}
textarea:focus{
  outline:0;
}

Answer 1

我想到的最简单的方法是将 input 上的 line-height 设置为大约 40px。因为它有固定的高度，所以将文本移到底部就可以了。