Измените CSS метки, если значение для ввода файла

Question

У меня есть сайт WordPress с контактной формой 7. Кнопка по умолчанию для выбора «Ввод файла» вообще не имеет стиля CSS, поэтому я добавил метку и немного CSS, чтобы он выглядел красиво.

Изображение ярлыка кнопки вложения контактной формы:

Люди могут нажать кнопку «Добавить изображение» и добавить изображение. Проблема в том, что после того, как вы выбрали изображение, нет визуальной индикации того, что оно работает.

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

Живой сайт: https://furniturewizards.com.au/upholstery-and-furniture-repairs/

Answer 1

Используйте функцию onchange до input и в функции спросите, были ли прикреплены файлы if (file.files && file.files[0])

Код с вашего сайта:

function attach(file){
   if (file.files && file.files[0]) {
     document.getElementsByClassName("select_euoxz")[0].style.backgroundColor = "black";//change color to label
   }

}

.select_euoxz {
    width: auto;
    display: inline-block;
    color: #fff;
    padding: 13px 35px;
    margin-left: 5%;
    margin-bottom: 20px;
    border-radius: 3px;
    background-color: #c72127;
    font-weight: 400;
    font-size: 22px;
    font-style: italic;
    font-weight: lighter;
    cursor: pointer;
    box-shadow: 1px 1px 5px 0 rgba(16,16,16,.5);
}
span.wpcf7-form-control-wrap {
    position: relative;
}
#euoaszxcn {
    display: none;
}

<label class="select_euoxz" for="euoaszxcn">Attach Images</label>
<span  class="wpcf7-form-control-wrap file-847">
<input onchange="attach(this);" type="file" name="file-847" size="40" class="wpcf7-form-control wpcf7-file" id="euoaszxcn" accept=".jpg,.jpeg,.png" aria-invalid="false"></span>