アイコンを中央に配置した入力プレースホルダー

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

擬似要素とアイコン要素を代入してみてください。

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

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

フィドル：https://jsfiddle.net/7yxdfewq/