Переход «Упрощение» не работает на границе фокуса ввода текста

Question

transition: all .2s ease-in-out; не работает в фокусе для моего поля ввода текста.

Я хочу, чтобы при фокусировке поля ввода текста черная рамка исчезала, и наоборот, когда вы его не фокусировали.

Это мой css:

#game-pin > input:focus {
  outline: none;
  border: 2px solid black;
  transition: all .2s ease-in-out;
}

Я пытался поместить transition: all .2s ease-in-out; в #game-pin, но безрезультатно. Я также попробовал transition: border .2s ease-in-out; вместо этого, но он все еще не работает.

Я не могу найти подобную проблему в Интернете, поэтому я подумал, что это будет проблемой в моем браузере. Тем не менее, я проверил это на Opera, Google Chrome, Internet Explorer, Firefox, Safari и Microsoft Edge, и все они отказались от ease-in-out этой границы для меня.

Любая помощь будет оценена, спасибо!

Answer 1

Определите границу с прозрачным цветом и измените border-color на фокусе.

Примечание: если вы хотите, чтобы эффект также появлялся на размытии, переместите переход к определению input.

input {
  transition: all 1s ease-in-out; /* changed the timing to show the effect */
  border: 2px solid transparent;
  background: lightgrey;
}

input:focus {
  outline: none;
  border-color: black;
}

<input placeholder="click here">