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

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>