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

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

我在这里做了一把小提琴：

这就是我的HTML的外观：

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

---

我想到的最简单的方法是将

input

上的

line height

设置为大约

40px

。因为它有一个固定的高度，所以将文本移动到底部就可以了。

根据我的理解，您希望您的占位符和输入位于中间

添加以下内容

.email{
    padding-bottom:10px;
}

并在form>div>inputcss文件中添加{height:30px；}

---

以下是

以下是两种变体：

1：

默认情况下，删除任何特定的

高度

或

填充

将使文本与其周围的边框保持“紧贴”。从这里开始，只需将填充添加到左/右+顶部填充即可。我相信这会给你想要的效果

之后，只需在通用输入本身中移动用于

-webkit输入占位符的样式。然后，如果您只想在颜色上进行区分，则将其专门添加到
-webkit input placeholder

此外，还更新了尽可能使用速记CSS方法

2：

现在，如果您希望文本的底部边框更友好，那么只需对输入元素应用一组
height
。顶部的
填充
将确保文本“紧贴”底部。
那么您希望文本看起来更靠近行吗？像这样：？有关信息，请参见此。
.email{
    padding-bottom:10px;
}