html - 在占位符中的元素之间添加空间

Question

我正在尝试进行这样的输入，我应该将图标放在右边，将文本放在左边:

我已经尝试过了，但我认为这不是一个好主意:

 <div class="form-group">
  <input type="email" class="form-control" id="FirstName" aria-describedby="emailHelp" placeholder="FirstName &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#xf2c0;">
</div>

有什么想法吗？

Answer 1

您可以将占位符图标显示为背景图像，然后使用 :placeholder-shown 的否定将其隐藏。

[type=email] {
  background-image: url(https://image.flaticon.com/icons/svg/131/131155.svg);
  background-position: calc(100% - 8px)  center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  padding: 1em 16px 1em 1em;
  border: 1px solid;
}

[type=email]:not(:placeholder-shown) {
  background-image: none;
}

<div class="form-group">
  <input type="email" class="form-control" id="FirstName" aria-describedby="emailHelp" placeholder="FirstName">
</div>