如何在输入文本字段中移动文本？-解网

问：

我创建了一个 200x50px 的输入文本字段。在该输入字段中键入的文本会自动显示在该输入字段的垂直中心。如何将其移动到该文本字段中？我尝试做一些事情，比如 padding-top：20px 来向下移动它，但这也使输入字段更高。当我把这个高度变小时，它就会切掉底部的文字。

您可以在以下位置查看示例：demo

我刚刚添加了 1 个输入字段：

<input placeholder="fill it in"></input>

然后在上面使用了这个 css：

input {
  width:200px;
  height:50px;
  font-size: 20px;
  text-align: center;
  background-color: yellow;
}

它现在是 200x50px 高，但我想不出一种方法来向下或向上移动填充的文本，而不会使输入文本区域更高/更小。

CSS的

还不太适合我。你能看看我的codepen吗？在 Safari 中，占位符文本的输入效果很好，占位符绿色也会填充输入区域。在 Chrome 中，占位符文本根据该文本的顶部垂直居中，较小的绿色区域显示这一点。我怎样才能使它都垂直居中？就像输入的文本一样？codepen.io/anon/pen/XwpLYZ

答：

0赞 jiggy1965 5/15/2019 #1

你可以在这个代码笔中看到我的问题：演示

占位符文本和输入文本具有不同的字体大小。在 Chrome 中，占位符文本与输入文本的顶部对齐，而在 Safari 中，占位符文本与输入文本的底部对齐。

input {
  width:200px;
  height:50px;
  font-size: 28px;
  text-align: center;
  background-color: yellow;
}

::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    font-size: 12px;
    text-transform: none;
}

我希望更好地控制占位符和输入文本的垂直位置，以便它们在所有浏览器中的定位方式相同。在固定大小的输入文本字段的垂直中心、顶部或底部。

上一个：文件和文件夹获得具有 600 和 700 权限的 ftp-ed

下一个：如何在Safari和Chrome中居中占位符文本？

如何在输入文本字段中移动文本？

How to I move text inside input text field?

评论