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

【问题标题】：Change Label CSS when File Input has a value当文件输入有值时更改标签 CSS
【发布时间】：2019-02-20 11:00:44
【问题描述】：

我有一个带有 Contact Form 7 的 WordPress 网站。文件输入选择的默认按钮根本没有 CSS 样式，因此我添加了一个标签和一些 CSS 以使其看起来更漂亮。

联系表格附件按钮标签的图片：

人们可以点击“附加图片”按钮并添加图片。 问题是，一旦您选择了一张图片，就没有视觉上的迹象表明它有效。

我想知道是否可以添加任何简单的 javascript 来让这个按钮在选择附件时改变颜色。

现场直播：https://furniturewizards.com.au/upholstery-and-furniture-repairs/

【问题讨论】：

能不能显示上传图片的功能...
您不介意将代码 sn-p 共享给该按钮吗？
您是否尝试在文件输入上监听“更改”事件？ stackoverflow.com/questions/20244327/… 请注意，您应该检查是否已添加实际文件，因为删除文件时也会触发该事件。

标签： javascript css forms

【解决方案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>

【讨论】：

告诉更多帮助:)