Текстовое поле белое, когда оно должно быть прозрачным в CSS?

Question

Я видел несколько ответов, однако до сих пор мне не удалось решить мою проблему.

У меня есть некоторые текстовые поля, которые, как это:

.form-wrapper .field-list .field .field-element{ 
    background-color: rgba(0,0,0,0.5); 
    color: rgba(255,255,255,255); 
} 

Так вот, он получит существующие коробки (текстовые поля) и изменяет фон в полупрозрачный черный, а также изменить цвет текста - белый. Однако, когда я нажимаю текстовое поле, он становится полупрозрачным черным до простого белого цвета. Любая помощь в том, как исправить/сделать ее того же цвета, что и фон текстового поля? - Благодаря

ПРИМЕЧАНИЕ

Я видел некоторые вещи, как это:

#inputId:-webkit-autofill { 
background-color: white !important; 
} 

Но это не работает для меня.

Answer 1

Использовать псевдоэлемент :focus.

.form-wrapper .field-list .field .field-element:focus { 
    color: #fff; 
    background-color: rgba(0,0,0,0.5); 
} 

Можно даже стиль сфокусированной формы и ноны-ориентированная формы, в то же время:

.form-wrapper .field-list .field .field-element, 
.form-wrapper .field-list .field .field-element:focus, 
{ 
    background-color: rgba(0,0,0,0.5); 
    color: rgba(255,255,255,255); 
} 

Я хотел бы предложить, что вы создаете какое-то разница стиля для сфокусированной формы ввода. Это относится к причинам доступности/удобства использования.