data-icon not working in Firefox/Chrome

Question

Any idea why this is working in Safari, but not Firefox and 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;
}

Any help appreciated.

Yes, there is: http://www.w3.org/TR/html-markup/input.search.html — Tim M., Apr 03 '13 at 19:00
Did you try to use another font? Maybe that causes the problem. — rekire, Apr 03 '13 at 19:01

score 4 · Accepted Answer · edited May 23 '17 at 11:52

4

Keep in mind you can't use pseudo-elements on replaced elements which includes <img> <select> <input> <object> etc. basically elements that have no content

Refer to the Visual Formatting Model in the 2.1 Spec for more info

edited May 23 '17 at 11:52

Community

1
1

answered Apr 03 '13 at 19:00

Adrift

58,167
12
92
90

Thanks @TimMedora, I thought I'd have to use a workaround like that in the end. – realph Apr 03 '13 at 21:21

data-icon not working in Firefox/Chrome

1 Answers1