如何去掉input[type=search]鼠标点击时的蓝色外框

如何去掉input[type=search]鼠标点击时的蓝色外框

这几天开发的时候遇到一个问题，就是input的type设置为search，在webkit内核的浏览器，鼠标点击，搜索框获得焦点的时候会有一个蓝色的边框出现，很影响美观，几经搜索，百度上的答案也不少

比如像这样的：

input[type=search] {
    -webkit-appearance:none;
}

我试了，根本没用，然后查了半个小时之后，找到了正确答案：

input[type="search"] {
    border-radius: 5px;
    border: 1px solid #ebebeb;
    outline: none;
}

这样就完美解决问题，好像是需要先设置border-radius和border，否则没法解决