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

Question

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

我在这里做了一个小提琴：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

我想到的最简单的方法是将line-height 上的input 设置为大约40px。由于它具有固定的高度，因此可以很好地将文本移动到底部。

Answer 2

据我了解，您希望占位符和输入位于中心。

添加以下内容

.email{
    padding-bottom:10px;
}

并在表单 > div > 输入 css 文件中添加 {height :30px;}

这里是http://jsfiddle.net/H7AVP/

Answer 3

这里有两种变体：

1：http://jsfiddle.net/H7AVP/5/

默认情况下，删除任何特定的height 或padding 将使文本与其周围的边框保持“紧密”。从那里，只需将填充添加到左/右 + 填充到顶部。我相信这应该会给你想要的效果。

之后，只需将您用于-webkit-input-placeholder 的样式移动到通用输入本身。然后，如果你只是想在颜色上进行区分，那就把它专门添加到-webkit-input-placeholder。

此外，已更新为尽可能使用速记 CSS 方法。

2：http://jsfiddle.net/H7AVP/6/

现在，如果您希望您的文本与底部边框更友好，那么只需将一组height 应用于输入元素。顶部的padding 将确保您的文本“紧贴”底部。