更改输入内文本的位置/大小（尤其是填充输入时）

Question

我一直遇到这样的问题：输入中的文本位置发生变化，无论是在填充输入后移动还是变小。

那里的文本需要进一步向左移动并调整大小，以便它几乎填满输入。我怎样才能做到这一点？这是我在处理输入并向其应用填充时经常遇到的问题。

我尝试将文本移至左侧，但它要么根本不起作用，要么起作用但没有响应。

Answer 1

使用 CSS 调整输入字段内的文本位置通常是通过填充完成的，但如果您还想调整文本大小，则需要使用 font-size 属性。如果应用填充后文本未垂直居中，您可能需要调整 line-height 属性以匹配输入高度。以下是如何执行此操作的示例：

input[type="text"] {
  padding: 10px; /* Adjust the value to your preference */
  font-size: 16px; /* Adjust the text size as needed */
  line-height: 1.5; /* This should be close to the input height for vertical centering */
  /* ... other styles ... */
}

确保行高接近或等于输入的高度（顶部内边距 + 底部内边距 + 边框宽度 + 文本高度）。字体大小将控制文本在输入中显示的大小。如果输入根据内容动态调整，您可能需要一个 JavaScript 解决方案来根据输入的值长度调整字体大小。”

此解释假设开发人员熟悉基本 CSS 并且可以将样式应用到他们的具体情况。调整填充、字体大小和行高应该解决输入中文本的位置和大小问题。