input样式重置(outline:none)

Posted xy88

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了input样式重置(outline:none)相关的知识,希望对你有一定的参考价值。

我们在写表单的时候,经常需要自定义表单的样式,当然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啦;

    

以上是关于input样式重置(outline:none)的主要内容,如果未能解决你的问题,请参考以下文章

css reset样式重置

取消chrome浏览器下input和textarea的默认样式

select input 默认样式修改

select input 默认样式修改

日常总结

取消chrome浏览器下input和textarea的默认样式