Как создать запасной вариант для кнопки отмены поиска в HTML5 в веб-комплекте?

Question

Наша спецификация требует кнопку отмены в окне поиска, и я знаю, как ее сделать, но я надеялся использовать встроенную кнопку отмены поиска в веб-наборе "x", а затем вернуться к ручному решению, если такая поддержка не поддерживается.не существуетКак я мог бы даже проверить, существует ли эта функция?Я не вижу никакого способа сделать это с Modernizr.

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

Вот полезная ссылка для удаления стилей, но я хочу добавлять стили, только если поддержка не существует, так что это не поможетя:

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

Answer 1

Если вы хотите использовать Modernizr, вы можете добавить следующий пользовательский тест:

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

Смотрите это в действии здесь: http://dabblet.com/result/gist/1725982

Таким образом вы можете проверить, поддерживает ли браузер псевдоэлемент -webkit-search-cancel-button, так что вы можете на него положиться. Однако вы все равно можете следить за прогрессом других браузеров, поэтому вы можете добавить соответствующий селектор в тест Modernizr.

Грустно, что вы не можете сделать это функциональным доказательством, так как этот элемент не стандартизирован и доступен только для webkit.