html - 数据图标在 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;
}

任何帮助表示赞赏。

score 4 · Accepted Answer

请记住，您不能在替换元素上使用伪元素，其中包括<img> <select> <input> <object>等。基本上没有内容的元素

1 回答 1