Переход границы CSS

Question

Я хотел бы создать окно ввода и создать его с помощью границы.
Для этого мне нужно сделать input:focus, затем я сделал это, я не знаю, как двигаться дальше.

Если я хочу изменить переход фона, тогда я делаю transition: background Xs; или -webkit-transition: background Xs;.

Я сделал поиск, и я не нашел ничего, что могло бы мне помочь.

Спасибо.

Answer 1

Ваш текущий переход применяется только к элементам background, неborder. Либо изменение «фон» на «границе», удалить «фон» полностью или добавить в «рамку» вместе с вашим фоном:

input { 
    border: 1px solid #bbb; 
    transition: background 0.2s, border 0.2s; 
} 

input:focus { 
    border-color: tomato; 
} 

Answer 2

input:focus { 
    border: 5px solid red; 
    background: blue; 
} 
input { 
    transition: border 1s, background 2s; 
} 

Удалить то, что вам не нужно, границы или фона;) Вы должны указать переход в самом элементе и желаемый эффект в: focus.