input样式重置(outline:none)

Posted 2022-08-25 xy88

我们在写表单的时候，经常需要自定义表单的样式，当然input输入框也不例外，那么如何能写出好看一点的输入框呢？

　　　　　例如简单的三个空按钮:　

　　　　　　<input type="button" id="btn1">
　　　　　　<input type="button" id="btn2">
　　　　　　<input type="button" id="btn3">

　　　　　来个简单的样式:

　　　　　　width: 50px;
　　　　　　height: 50px;
　　　　　　border-radius:50%;

　　　　运行如下图显示的(各个浏览器之间默认样式有所差距):

　　　　　　

　　　所以,首先要将input输入框的默认样式去掉(让其在任何地方显示的一样):

　　　　　　border:0;

　　　　　　outline:none;

　　　再看效果:

　　　　　　;

　　　　这样就ok啦;