海创软件组--20200920--去掉Element中打开抽屉时默认选中标题的蓝色边框--input修改自动填充背景色(单一色以及透明)！

@TOC

去掉Element中打开抽屉时默认选中标题的蓝色边框

最近在用element的抽屉展示修改主题样式供用户选择修改，但一打开抽屉会默认选中标题，标题出现蓝色的边框，自我感觉非常不好看，只能想办法去掉它。

一开始的图：有个蓝色边框不好看吧。

修改后的图：没有蓝色的框好看不少

实现方式：
还是回归最基本的样式修改，打开控制台，找到标题的样式控制，修改其中的outline样式即可。

代码：

/*去掉打开抽屉时自动选中标题时的蓝色边框*/
  .el-drawer__header span:focus {
    outline: 0;
  }

---

input修改自动填充背景色(单一色以及透明)

前言

最近想做一个比较好看的登录界面，就将输入框的背景色什么的都改了一遍，测试时基本效果都达到预期，唯独自动填充账号密码时，自己设置的输入框样式不起作用了，样式又变回默认的自动填充色了，这让我很苦恼…

自动填充前的图

自动填充后的图

解决方法

我先是通过打开控制台查找控制自动填充背景色的样式：

找出了原来是input:-internal-autofill-selected将我设置的背景色覆盖了。

修改默认背景色为单一色彩时可采用以下方法：

input:-webkit-autofill {
 box-shadow: 0 0 0px 1000px blue inset !important;
}

处理后自动填充样式为相应颜色

上面的方法虽然能设置单一的背景色，但我想设置为透明，尝试了很多遍还是无法成功，只好换别的办法：

input:-internal-autofill-previewed,
input:-internal-autofill-selected {
  -webkit-text-fill-color: #FFFFFF !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

处理后自动填充样式正常（透明）