移动设备上的用户输入和占位符文本对齐

Question

我在 iOS 版本 12.4.9 上遇到了用户输入和占位符文本对齐的问题。我只在 Safari 和 Chrome 上使用 iPhone 6 测试过这个问题，这两个浏览器都存在。

在下面的图片中，

• input 元素有一个red 边框，而::placeholder 伪元素有一个yellowgreen 边框；

• 'NOT A PLACEHOLDER' 和 'IN' 是实际输入，而 'DIA' 和 'EMAIL ADDRESS' 是占位符。

---

这是基本样式和结果：

div.bottom-container > form input,
div.bottom-container > form input::placeholder {
  height: var(--fontSize);
  text-transform: uppercase;
  font-size: var(--fontSize);
  border-radius: unset; /* for mobile only */
}
body[data-mod='mobile'] > div.bottom-container > form input {
  border: solid red 1px;
}
body[data-mod='mobile'] > div.bottom-container > form input::placeholder {
  border: solid greenyellow 1px;
}

---

通过添加以下样式，我已经能够根据需要对齐占位符文本。 值得注意的是，input 和 ::placeholder 都必须有边框才能像这样正确对齐。

body[data-mod='mobile'] > div.bottom-container > form input {
  padding: 0;                   /* new */
  line-height: var(--fontSize); /* new */
  border: solid red 1px;
}

---

我想像占位符文本一样对齐输入，但我很挣扎，无法访问 Mac，因此无法访问 iOS 开发者控制台。 （值得注意的是，我没有 Android 设备，因此我什至无法知道该平台上是否存在问题。）

从上面的结果来看，input 元素似乎被裁剪了，并且具有一些无法更改的类似padding 的质量。

我知道display 在匹配移动设备上@9​​87654338@ 和button 元素的外观方面发挥了作用，我曾尝试摆弄其他属性，但无济于事。

---

这是删除了height 的基本样式。

---

我怀疑这个问题可能是由于浏览器为了可用性或用户体验而影响了input 字段的最小大小。但这只是一个猜测。我真的不知道发生了什么。

#有人知道发生了什么或如何解决吗？

Answer 1

例如，您可以将输入包装在 div 中，并将输入相对于容器对齐。

.wrapper {
  padding: 0;
  position: relative;
  height: 20px;
  background-color: coral;
  border: 1px solid red;
}

.wrapper input {
  position: relative;
  top: 1px;
  background-color: transparent;
  border: 0;
  font-size: 20px;
  /* Uncomment following line to see input borders */
  /* border: 1px solid lawngreen; */
}

<div class="wrapper">
  <input type="text" value="EMAIL" />
</div>