[分享]css3搜索框呼出键盘

CSS3搜索框呼出键盘众所周知，CSS是网页设计不可或缺的一部分。有一个令人惊叹的新特性，那就是CSS3搜索框呼出键盘。 / CSS3搜索框呼出键盘 / input::webkitsearchcanc...

CSS3搜索框呼出键盘

众所周知，CSS是网页设计不可或缺的一部分。有一个令人惊叹的新特性，那就是CSS3搜索框呼出键盘。

 /* CSS3搜索框呼出键盘 */
    input[type=search]::-webkit-search-cancel-button,
    input[type=search]::-webkit-search-decoration,
    input[type=search]::-webkit-search-results-button,
    input[type=search]::-webkit-search-results-decoration {
        display: none;
    }
    input[type=search] {
        -webkit-appearance: none;
        appearance: none;
        padding-right: 25px;
        background-image: url("search_icon.svg");
        background-repeat: no-repeat;
        background-position: center right;
    }
    input[type=search]:focus {
        background-color: #f5f5f5;
        outline: none;
        background-image: url("search_icon_active.svg");
    } 

看到上述代码，你会发现其中很多命令都是隐藏一些默认的搜索框元素。然后，我们设置另一个具有更好兼容性的搜索图标背景，这个图标将在聚焦时被应用。同样也添加了一些样式以增强可用性。

这里有个在线演示，你可以点进去看看效果： https://codepen.io/gilbertp/pen/XXXORK

希望本文对您有所帮助，谢谢！