Search code examples
cssinputsassoutline

Custom outline and input text color problem

i got a problem in css . So when i remove the color from input , outline works as it has to , but when i add color:white at first it shows default outline with color white , and only then the written outline works

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..." />

check this out http://test-znaniya.ga

Solution

  • This happens because of this line:

    transition: outline-color 0.5s ease-out;

    It will transition the outline-color from the current color to the new colour (#ff5500), but you have not defined a current color, so the question is "what is the default value of outline-color ?

    According to MDN in the formal definition, the initial value is

    "invert, for browsers supporting it, currentColor for the other"

    currentColor will be lime in the example you gave.

    So to recap what is happening when you focus:

    1. the outline is set to solid with 2px width
    2. it's color is transitioned from lime to some kind of red

    This can be easily fixed by simply adding a default value for the current-color to for example the same as the border 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;
}