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

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;

它将 outline-color 从当前颜色转换为新颜色 (#ff5500)，但您尚未定义当前颜色，所以问题是“[=12 的默认值是多少=] ?

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

"invert，对于支持它的浏览器，currentColor对于其他"

在您给出的示例中，

currentColor 将是 lime。

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

轮廓设置为 solid with 2px width
它的颜色从 lime 过渡到 某种红色

只需为 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;
}

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

Custom outline and input text color problem

css

input

sass

outline