数据图标在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上使用包含<img> <select> <input> <object>等基本元素的伪元素没有content

有关详细信息，请参阅Visual Formatting Model in the 2.1 Spec