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交流以及问答互动,编程语言免费教学,有问题来本站问答栏目,本站及时问您解答。
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!