Question

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

这就是我的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;
}

并以表格＆gt; div>输入css文件add {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应用于input元素即可。顶部padding将确保您的文字“贴近”底部。

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

3 个答案: