当文件输入有值时更改标签CSS

Question

我有一个使用Contact Form 7的WordPress网站。“文件输入”选择的默认按钮根本没有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>