css样式设置时Button 按钮的点击时候出现蓝色边框怎么解决？

1.Button 按钮的点击时候出现蓝色边框

解决方案：添加css样式属性。

 button{

    outline:none;

}

棘手2：谷歌浏览器中button按钮的边框怎么去除？ 

解决方案：设置这个就看不到那个框了。

:focus{

    outline: 0;

}

【拓展】很多设计师喜欢使用：{outline:none;} 或者：focus {outline:none;} 

来解决焦点粗虚线框的问题。

棘手3：使用上边方法，对于button在Firefox下还是会有虚线框的。 

解决方案： 

需要使用Mozilla的一个私有属性：-moz-focuse-inner。不过这里有一点大家需要特别的注意：通过“-moz-focus-inner”并不是重置“outline”这个属性的值，而是需要通过他来改变buttons的“border”样式。代码如下：

input::-moz-focus-inner,

button::-moz-focus-inner {

    border: 0;

}

【对症下药】 

　　上面写是包括了所有的input，但有时我们并不想这个值对“input[type=text]”有影响，那么我样其实可以这样来设置：

button::-moz-focus-inner,

input[type="reset"]::-moz-focus-inner,

input[type="button"]::-moz-focus-inner,

input[type="submit"]::-moz-focus-inner,

input[type="file"] > input[type="button"]::-moz-focus-inner {

　　　border: none;

}

【总结】 

　　通过上面的代码，那个难看的虚线框，我们就可以顺利地移除了。 

　　同时，其实我们需要对button的outline进行这样的设置,才能达到所有浏览器一样的风格效果：

:focus {outline:none;} 　　/*for IE*/

::-moz-focus-inner {border-color: transparent;} /*for mozilla*/

这样，表单button得到焦点，在各浏览器下的渲染效果就一致了。