Question

Our specification requires a cancel button in the search box and I know how to make one, but I was hoping to utilize the built-in webkit search cancel button “the x” and then fallback to the manual solution if such support doesn’t exist. How would I even check if the feature exists? I don’t see any way of doing it with Modernizr.

<input type="search" name="q" placeholder="Search all..." results="5">

Here’s a useful link for removing styles, but I only want to add styles if support doesn’t exist, so this doesn’t help me:

http://css-tricks.com/webkit-html5-search-inputs/

Answer 1

If you want to use the Modernizr, you can add the following custom test:

Modernizr.testStyles(
    '#modernizr, x::-webkit-search-cancel-button { width: 9px; }',
    function(elem, rule){
        Modernizr.addTest('search-reset', elem.offsetWidth == 9);
    });

See it in action here: http://dabblet.com/result/gist/1725982

Doing so you can test if the browser supports the -webkit-search-cancel-button pseudo-element, so you can rely on it. However, you still could want to follow the other browsers’ progress, so you could add the corresponding selector to the Modernizr’s test.

Sad that you can’t do this feature-proof since this element is not standardized and is webkit-only.