输入框轮廓移除问题：outline-color无效且outline:none导致元素凸起

嘿，我来帮你搞定这个输入框的轮廓问题！先给你拆解下为啥会出现这俩情况：

为啥outline-color没效果？ #

你设置了outline-style: auto，这个是浏览器自带的原生高亮样式，很多浏览器会优先用系统默认的外观，直接忽略你自定义的outline-color，所以改颜色当然没反应啦。

为啥outline: none会让元素凸起来？ #

其实不是元素“凸”，是输入框默认自带了一个细边框（比如Chrome默认是浅灰色的1px边框），平时被浏览器的auto轮廓盖住不明显，当你把outline去掉后，这个默认边框和你的深色背景（#363636）形成对比，就显得凸出来了。

给你几个针对性的解决方案，按需选就行：

方案1：完全移除轮廓和默认边框（适合想要极简样式的情况）

直接把outline和默认border都去掉，还可以自己按需定义边框样式：

input {
  background-color: #363636;
  outline: none; /* 移除原生轮廓 */
  border: none; /* 移除默认边框 */
  /* 如果需要自定义边框，取消下面注释就行 */
  /* border: 1px solid #555; */
}

方案2：保留自定义轮廓（不想去掉轮廓，只想改颜色）

把outline-style改成solid（或者dashed、dotted这类常规样式），这样outline-color就能生效了，也可以直接用简写：

input {
  background-color: #363636;
  /* 写法一：分开设置 */
  outline-style: solid;
  outline-color: #666; /* 换成你想要的颜色 */
  /* 写法二：简写更方便 */
  /* outline: 1px solid #666; */
}

方案3：保留边框但解决凸起问题

如果想保留输入框的边框，只是去掉outline，那把边框颜色改成和背景色接近的就行，这样就不会有明显的凸起感：

input {
  background-color: #363636;
  outline: none;
  border-color: #444; /* 选一个和#363636接近的深色 */
}

备注：内容来源于stack exchange，提问作者Felika