數據圖標在Firefox/Chrome中不起作用

Question

任何想法爲什麼這是在Safari中工作，但不是Firefox和Chrome？

HTML：

<input type="search" placeholder="Search" id="search" name="search" id="s" data-icon="s"> 

CSS：

#search[data-icon]:before { 
    font-family: 'Pictos Custom'; 
    content: attr(data-icon); 
    -webkit-font-smoothing: antialiased; 
} 

讚賞任何幫助。

Answer 1

請記住，你不能在replaced elements使用僞元素，其中包括不具有content

參考Visual Formatting Model in the 2.1 Spec更多信息