CSS入力に背景が

Question

を働いていないとアイコンを設定するには、私はこのように設定backroundのを持っている検索入力フィールドを、持っています。私が使っていると、このようにそれを行うことを試みた：

input[type=search]:before { 
    font-family: 'Ionicons'; 
    content: '\f2f5'; 
    color: red; 
} 

これはfiddleです。 アイコンは表示されません。どうすればよいですか？

Answer 1

あなたはcan't use :before or :afterで<input>すべてのブラウザで！

しかし、あなたは<input>ための容器を使用したソリューションを使用することができます。

div span { 
 
    margin-left:-20px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.css" rel="stylesheet"/> 
 
<div> 
 
    <input type="text"/> 
 
    <span class="ion-search"></span> 
 
</div>

あなたはまた、より多くの利用しやすさのために<input>を取り巻く<label>を使用することができます。

label[for="search"]:after { 
 
    font-family: 'Ionicons'; 
 
    content: '\f2f5'; 
 
    color: red; 
 
    margin-left:-20px; 
 
} 
 
label[for="search1"] span { 
 
    margin-left:-20px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.css" rel="stylesheet"/> 
 
<label for="search"> 
 
    <input id="search" name="search" type="text"/> 
 
</label> 
 

 
<!-- or --> 
 

 
<label for="search1"> 
 
    <input id="search1" name="search1" type="text"/> 
 
    <span class="ion-search"></span> 
 
</label>

Answer 2

:beforeおよび:afterは、「コンテナ」要素でのみ使用できます。 inputは、他の要素を「含む」ことができないため、コンテナではありません。

ラップスパンでの入力、およびそれに:beforeスタイルを適用します。

<span class="container"><input type="search" placeholder="Search"></span> 

.container:before { 
    font-family: 'Ionicons'; 
    content: '\f2f5'; 
    color: red; 
    position: absolute; 
} 

Updated Fiddle