Change Label CSS when File Input has a value

Question

I have a WordPress site with Contact Form 7. The default button for the File Input selection has no CSS styling at all so I added a label and some CSS to make it look nice.

Picture of contact form attachment button label:

People are able to click the "Attach Image" button and add an image. The problem is that once you've selected an image there is no visual indication that it worked.

I would like to know if there is any simple javascript I can add to make this button change color when an attachment is selected.

Live site: https://furniturewizards.com.au/upholstery-and-furniture-repairs/

Did you try listening to the 'change' event on the file input? https://stackoverflow.com/questions/20244327/on-change-event-for-file-input-element Note that you should check that an actual file has been added because the event can be triggered when removing file as well. — Shahar, Sep 16 '18 at 08:07

לבני מלכה · Answer 1 · 2018-09-16T08:25:34.897

Use function onchange to input and in function ask if files were attached if (file.files && file.files[0])

Code from your site:

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>

tell for more help:) – לבני מלכה Sep 16 '18 at 08:20 — לבני מלכה, Sep 16 '18 at 08:20

Change Label CSS when File Input has a value

1 Answers1