时间戳

首页 > 解决方案 > 移动设备上的用户输入和占位符文本对齐

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

问题描述

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

在下面的图片中，

这是基本样式和结果：

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;
}

在此处输入图像描述

通过添加以下样式，我已经能够根据需要对齐占位符文本。值得注意的是， theinput和 the::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方面发挥了作用，我尝试过摆弄其他属性，但无济于事。inputbutton

这是height移除后的基本样式。

在此处输入图像描述

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

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

标签： htmlcssiosmobilebrowser

解决方案

例如，您可以将输入包装在 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>

推荐阅读