css - 如何为 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-only。