如何消除input表单输入框的默认样式

        input输入框在前台显示会有默认的border,所以我们在给input输入框设置高度的时候会不准确，影响了网站整体布局的美观，今天就告诉大家该如何消除input输入框默认样式,其实很简单，给input添加以下css代码,即可清除input输入框默认样式,下面为大家奉上代码。


 input, button, select, textarea
{
outline: none;
-webkit-appearance: none;
border-radius: 0;
}


以上为清除input输入框默认样式的css代码，我们现在讲一下消除input输入框默认样式的原理，大家可以自己一行一行添加，有助于理解消除input输入框默认样式的的原理；

其中outline: none;代码意思为去掉chrome浏览器自带的点击input框出现边框情况；
-webkit-appearance: none;去掉按钮样式
border-radius: 0;去掉圆角

       以上便是如何消除input表单输入框的默认样式的相关方法,望大家关注段龙龙博客,本站还提供模板下载,SEO交流以及问答互动,编程语言免费教学,有问题来本站问答栏目,本站及时问您解答。