добавить пространство между элементами в заполнителе

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

Вы можете поместить ввод и значок в <div>, удалить границу из ввода и добавить ее в <div>

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

Я не думаю, что есть какой-либо способ выровнять тексти значок по-разному в одном и том же тексте-заполнителе

Answer 3

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