input 输入框项目使用改造

背景

input的输入框在鼠标选中，hover 等有默认的颜色，一般项目使用需要diy一下。

改造点

1. 设置 input 元素中光标的颜色

input { 
  caret-color: red;
}

2. 边框

  border: 0px solid transparent;

3.伪类

  &:-webkit-autofill { box-shadow: 0 0 0px 1000px #2372AA inset !important; }
         -webkit-text-fill-color: #fff;
        }

4. placeholer 字体样式

 .el-input__inner::placeholder {
            color: #fff;
  }

5. input输入框填充背景色和字体颜色

    box-shadow: 0 0 0px 1000px #283443 inset !important;   //改成你想要的背景色
      -webkit-text-fill-color:#fff !important

注意点：
在vue3使用的 element Plus 它的边框使用的是阴影实现

    ::v-deep .el-input__wrapper{
      box-shadow:0 0 0 1px #768084;
    }