居中输入字段-问题

Question

我想在输入字段的y中间居中放置一个图标。

我尝试过的是这样的：

#container {
  position: absolute;
  width: 40%;
  height: 20%;
}

#icon {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 15px;
  height: 15px;
  margin: auto;
  right: 4%;
  background-image: url("https://i.stack.imgur.com/Xcmsc.png");
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 2;
}

#input {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 15px;
  border: none;
  border-top: 1px solid #eae8ea;
  border-bottom: 1px solid #eae8ea;
}

<div id="container">
  <input id="input" placeholder="input" />
  <div id="icon"></div>
</div>

对于桌面野生动物园（Mac OS），它运行正常，但在移动设备（如iPhone）上，图标似乎根本没有居中：

如何解决在移动设备上发生的此错误？任何帮助将非常感激。预先感谢！

Answer 1

问题是由input元素的默认边距和填充引起的。浏览器使用默认值，并且需要覆盖默认值以将其设为空。 box-sizing: border-box;确保您添加到#input的边框被折叠到其高度且不超过该高度。

Here you can read more about border-box。

默认浏览器CSS（示例）

More about them。

这里已经被部分覆盖。

关键部分

#input {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

摘要

#container {
  position: absolute;
  width: 40%;
  height: 20%;
}

#icon {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 15px;
  height: 15px;
  margin: auto;
  right: 4%;
  background-image: url("https://i.stack.imgur.com/Xcmsc.png");
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 2;
}

#input {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 15px;
  border: none;
  border-top: 1px solid #eae8ea;
  border-bottom: 1px solid #eae8ea;
}

<div id="container">
  <input id="input" placeholder="input" />
  <div id="icon"></div>
</div>

Answer 2

我认为没有理由不能仅在输入中直接使用背景图像吗？ （我对原始示例进行了一些调整，但您明白了）

#container {
  width: 100px;
  height: 50px;
}

#input {
  line-height: 50px;
  font-size: 15px;
  border: none;
  border: 1px solid #eae8ea;
  background-image: url("https://i.stack.imgur.com/Xcmsc.png");
  background-repeat: no-repeat;
  background-size: 15px 15px;
  background-position: right center;
}

<div id="container">
  <input id="input" placeholder="input" />
</div>