Переход, border-color и :focus не работают над входным элементом ⇐ CSS

[Anonymous]

Я создаю окно поиска, подобное Google, для сайта электронной коммерции. Однако свойства border-color,transition и:focus не работают. Я опишу проблему в трех частях:
border-color: указанный мною шестнадцатеричный цвет воспроизводится только в нижней половине поля ввода, в верхней половине используется цвет по умолчанию< /p>
:focus: Я хочу, чтобы поле ввода приобрело оттенок зеленого, но оно просто меняет цвет по умолчанию.
переход: Мне нужна задержка в 1 секунду. когда он меняет свой цвет в фокусе, но задержки не происходит.
Я пробовал добавить !important ко всем свойствам на случай, если они конфликтуют с Bootstrap (я использую Bootstrap, в основном для его сеточная система). Тем не менее, это все равно не сработало. Вот код-

Код: Выделить всё

 input {
border-radius: 3rem;
height: 5rem;
border-color: #999999;
font-family: "Poppins";
font-size: 1.5rem;
transition: border-color 1s;
}

input[type=text]:focus {
border-color: #85de46;
}

Код: Выделить всё

Document

Подробнее здесь: https://stackoverflow.com/questions/786 ... ut-element