如何为webkit中的HTML5搜索取消按钮创建后备？

Question

我们的规范在搜索框中需要一个取消按钮，我知道如何制作一个，但我希望利用内置的webkit搜索取消按钮“x”然后回退到手动解决方案，如果这样的支持不不存在。我怎么能检查该功能是否存在？我没有看到任何使用Modernizr的方法。

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

这是删除样式的有用链接，但我只想添加样式，如果支持不存在，那么这对我没有帮助：

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

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，因此您无法进行此功能验证。