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

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> 

Answer 2

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  word-spacing: 9px !important;
}
::-moz-placeholder { /* Firefox 19+ */
  word-spacing: 9px !important;
}
:-ms-input-placeholder { /* IE 10+ */
  word-spacing: 9px !important;
}
:-moz-placeholder { /* Firefox 18- */
  word-spacing: 9px !important;
}

Answer 3

您可以將輸入和圖標放入<div>並從輸入中刪除邊框並將其添加到<div>

<div class="" style='border:1px solid black; width: 150px'>
   <input type="text" class="form-control" placeholder="Search" style="border:0px;" />
   &#xf2c0;
</div>

我不認為有任何方法可以在同一占位符文本中以不同方式對齊文本和圖標