私のプレースホルダーがなぜ表示されないのですか

Question

私はhtml形式で検索できますが、プレースホルダーは表示されません。私は多くの検索をしていますが、そのために働いていません。 あなたの質問を約検索アイコンは、プレースホルダの場所に表示されない場合、これはあなたを助けることが私に

.search-widget { 
 
    border: 1px solid #858585; 
 
    display: inline-block; 
 
    height: 35px; 
 
    float: left; 
 
} 
 

 
.search-widget input { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    background-color: transparent; 
 
    border: 0; 
 
    height: 35px; 
 
} 
 

 
.search-widget :hover, 
 
.search-widget :focus { 
 
    border-color: #1293D4; 
 
} 
 

 
.search-widget button { 
 
    background-color: transparent; 
 
    color: #1293D4; 
 
    border: 0; 
 
    height: 35px; 
 
}

<div class="search-widget"> 
 
    <form action="#"> 
 
    <input name="name" type="text" placeholder="search" required> 
 
    <button type="submit"><i class="fa fa-search"></i></button> 
 
    </form> 
 
</div>

Answer 1

を助けてください、ここにあなたのコードに外部CSS fontawesome.cssを追加するために逃しました、プレースホルダにアイコンが表示されている場合は、下のスニペットを参照してください。

.search-widget { 
 
    border: 1px solid #858585; 
 
    display: inline-block; 
 
    height: 35px; 
 
    float: left; 
 
} 
 

 
.search-widget input { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    background-color: transparent; 
 
    border: 0; 
 
    height: 35px; 
 
} 
 

 
.search-widget :hover, 
 
.search-widget :focus { 
 
    border-color: #1293D4; 
 
} 
 

 
.search-widget button { 
 
    background-color: transparent; 
 
    color: #1293D4; 
 
    border: 0; 
 
    height: 35px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="search-widget"> 
 
    <form action="#"> 
 
    <input name="name" type="text" placeholder="search" required> 
 
    <button type="submit"><i class="fa fa-search"></i></button> 
 
    </form> 
 
</div>