How to create a reserve for an HTML5 search cancel button in webkit?

Question

Our specification requires a cancel button in the search box, and I know how to create it, but I was hoping to use the built-in button to cancel the search for the web kit "x", and then return to the manual solution if such support does not exist. How can I check if a function exists? I see no way to do this with Modernizr.

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

Here is a useful link to delete styles, but I want to add styles only if support does not exist, so this does not help me:

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

Answer 1

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

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

See here: http://dabblet.com/result/gist/1725982

By doing this, you can check if the browser supports the -webkit-search-cancel-button pseudo-element, so you can rely on it. However, you can still monitor the progress of other browsers, so you can add an appropriate selector to the Modernizr test.

It is satisfactory that you cannot execute this function because this element is not standardized and is only webkit.