Как изменить цвет фона ввода формы?

Question

У меня есть форма wpcf7, которая загружает фоновый цвет светло-синего прямоугольника, когда в него вводится содержимое, которое было введено ранее.Например, мое устройство запоминает мой адрес и, как только я начинаю печатать, предлагает автоматически ввести все это, что, если я это сделаю, станет синего цвета фона.Однако, если я введу его вручную, фон останется белым.Итак, как мне сделать цвет фона E6f7ff, когда данные вводятся, предварительно загружены или нет.

Попробовал css.

.input.wpcf7-form-control:active {background-color: #E6f7ff;}

Не работает.

HTML:

<label> Your Name (required)<br />
<span class="wpcf7-form-control-wrap your-name"><input type="text" 
name="your-name" value="" size="40" class="wpcf7-form-control wpcf7- 
text wpcf7-validates-as-required" aria-required="true" aria- 
invalid="false" /></span> </label></p>
<p><label> Your Email (required)<br />
<span class="wpcf7-form-control-wrap your-email"><input type="email" 
name="your-email" value="" size="40" class="wpcf7-form-control 
wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates- 
as-email" aria-required="true" aria-invalid="false" /></span> 
</label></p>
<p><label> Subject<br />
<span class="wpcf7-form-control-wrap your-subject"><input 
type="text" name="your-subject" value="" size="40" class="wpcf7- 
form-control wpcf7-text" aria-invalid="false" /></span> </label></p>
<p><label> Your Message<br />
<span class="wpcf7-form-control-wrap your-message"><textarea 
name="your-message" cols="40" rows="10" class="wpcf7-form-control 
wpcf7-textarea" aria-invalid="false"></textarea></span> </label></p>
<p><div class="anr_captcha_field"><div id="anr_captcha_field_1" 
class="anr_captcha_field_div"></div></div><span class="wpcf7-form- 
control-wrap g-recaptcha-response"></span></p>
<p><input type="submit" value="Send" class="wpcf7-form-control 
wpcf7-submit" /></p>
<div class="wpcf7-response-output wpcf7-display-none"></div></form>. 
</div>
</div><!-- .entry-content -->
    <footer class="entry-footer">
        </footer><!-- .

Страница: https://adsler.co.uk/contact-us/

Answer 1

Вы используете неправильный псевдокласс CSS.Вместо :active вам понадобится:

.input.wpcf7-form-control:focus

. В качестве альтернативы вы можете использовать псевдокласс :focus-within

. Я пробовал это правило CSS на вашей странице:

form input:focus, form textarea:focus {
    background-color: blue;
}

и это работало для каждого элемента, кроме электронной почты.Если я добавлю !important, то это сработает и для электронной почты.