526互联

清除input默认样式方法解释

发布时间 2023-07-21 10:52:22作者: 可爱的小锋

image-20230313151926266.png

在表单控件中,我们知道input是有自带样式的,如图所示input是自带一定的样式,我们在修改CSS的时候得需要先了解一下它都自带哪些样式,这样修改调整的时候比较好设置,通过浏览器的控制台我们可以看到input自带的2px的边框,左右内间距是2,上下内间距是1.

image-20230313152358035.png

想要清除input自带的样式,可以利用如下代码清除:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>清除input默认样式</title>
  <style>
    input{
      border: 0;/*清除自带的2px的边框*/
      padding: 0;/*清除自带的padding间距*/
    }
  </style>
</head>
<body>
  <form>
    <input type="text" placeholder="我是文本框">
  </form>
</body>
</html>

清除完毕之后效果如下:

image-20230313152804930.png

其次当我们光标点击到这个文本框上之后,还会看到这个黑色的边框image-20230313153515042.png

如果同时想要去掉这个黑色的边框,利用如下代码解决,如此书写之后,就可以清除input的默认样式了.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>清除input默认样式</title>
  <style>
    input{
      border: 0;/*清除自带的2px的边框*/
      padding: 0;/*清除自带的padding间距*/
      outline: none;/*清除input点击之后的黑色边框*/
    }
  </style>
</head>
<body>
  <form>
    <input type="text" placeholder="我是文本框">
  </form>
</body>
</html>