Проблема с нестандартным контуром и цветом вводимого текста

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 будет лайм в приведенном вами примере.

Итак, чтобы резюмировать, что происходит, когда вы фокусируетесь:

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;
}