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的默认值是什么？< / p>

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

“ {invert，对于支持它的浏览器，currentColor，对于其他浏览器”

在您提供的示例中，

currentColor将为 lime 。

因此，回顾一下您专注时发生的情况：

轮廓设置为 solid ，宽度为 2px
它的颜色从石灰过渡到某种红色

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

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

1 个答案: