add space between elements in placeholder

问题: i'm trying to make an input like this where i should put the icon on the right and the text on the left : i already try this but i think it's not a good idea: <...

问题:

i'm trying to make an input like this where i should put the icon on the right and the text on the left :

enter image description here

i already try this but i think it's not a good idea:

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

any ideas ?


回答1:

You could show the placeholder icon as a background image and then hide it using the negation of :placeholder-shown.

enter image description here

[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>


回答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;
}

回答3:

You could put the input and icon into a <div> and remove the border from the input and add it to the <div>

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

i dont think there is any way to align the text and icon differently within the same placeholder text

  • 发表于 2019-03-22 04:14
  • 阅读 ( 204 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除