将输入占位符定位在中心的图标

Question

我正在使用this离子成分开发离子应用。

<div class="bar bar-header item-input-inset">
  <label class="item-input-wrapper">
    <i class="icon ion-ios-search placeholder-icon"></i>
    <input type="search" placeholder="Search">
  </label>
  <button class="button button-clear">
    Cancel
  </button>
</div>

我可以使用此css将占位符居中。但是，只有文本占位符是中心。我的目的是使离子搜索图标和占位符作为整体居中，如下图所示。

注意：不应假设占位符文本的长度。例如：根据文本长度向左和向右硬编码像素。

::-webkit-input-placeholder {
   text-align: center;
}

:-moz-placeholder { /* Firefox 18- */
   text-align: center;  
}

::-moz-placeholder {  /* Firefox 19+ */
   text-align: center;  
}

:-ms-input-placeholder {  
   text-align: center; 
}

Answer 1

尝试用伪元素替换icon元素：

＆＃13;

＆＃13;

::-webkit-input-placeholder {
   text-align: center;
}

::-webkit-input-placeholder::before {
  content:'\1F50D';
  padding-right: .2em;
}

:-moz-placeholder { /* Firefox 18- */
   text-align: center;  
}

:-moz-placeholder::before {
  content:'\1F50D';
  padding-right: .2em;
}

＆＃13;

<input type="search" placeholder="Search">

＆＃13;

＆＃13;

＆＃13;

小提琴：https://jsfiddle.net/7yxdfewq/