自定义轮廓和输入文字颜色问题

Question

我遇到了 css 问题。因此，当我从输入中删除颜色时，轮廓会按其必须的方式工作，但是当我首先添加

color:white

时，它会显示带有白色的默认轮廓，只有这样书面轮廓才起作用

input {
  padding: 14px;
  margin-right: 20px;
  background-color: #282828;
  font-size: 100%;
  color: lime;
  outline: none;
  transition: outline-color 0.5s ease-out;
  border: 1px solid #282828;
}

input:focus {
  outline: solid;
  outline-width: 2px;
  outline-color: #ff5500;
}

<input type="text" name="" id="" placeholder="Nickname..." />

看看这个http://test-znaniya.ga

Answer 1

发生这种情况是因为这一行：

transition: outline-color 0.5s ease-out;

它将把轮廓颜色从当前颜色转换为新颜色（#ff5500），但你还没有定义当前颜色，所以问题是“

outline-color

的默认值是多少？

根据MDN中的正式定义，初始值为

“

invert

，对于支持它的浏览器，

currentColor

对于其他”

在您给出的示例中，

currentColor

将是 lime。

回顾一下当你集中注意力时会发生什么：

1. 轮廓设置为solid，宽度2px
它的颜色从
2. 石灰转变为某种红色

只需为

current-color 添加默认值即可轻松解决此问题，例如与边框颜色相同：

input {
  padding: 14px;
  margin-right: 20px;
  background-color: #282828;
  font-size: 100%;
  color: lime;
  outline: none;
  outline-color: #282828;
  transition: outline-color 0.5s ease-out;
  border: 1px solid #282828;
}

input:focus {
  outline: solid;
  outline-width: 2px;
  outline-color: #ff5500;
}

Answer 2

谢谢您的详细解释。