取消表单元素的默认边框，以及获得焦点时的默认边框

我们在写表单元素时，有时候需要自己设置边框，以及获得焦点时的表单元素边框，下边分享设置该边框的方法。

目录

一、表单元素未获得焦点时的边框

二、聚焦（focus)后的边框

---

 

一、表单元素未获得焦点时的边框

该边框可以通过border样式属性来改变，如下，可以将边框先取消，然后给它设置下边框

input {
    border: none;
    border-bottom: 2px solid rgb(74, 150, 184);
}

二、聚焦（focus)后的边框

聚焦后的边框其实就是轮廓，直接对轮廓进行设置就行，如下：将聚焦后的轮廓取消。（以下的展示图是我设置的边框样式和背景，所以会有蓝色和下边框的样式）

 input.active{

outline: none;
}