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? stackoverflow.com/questions/20244327/… Note that you should check that an actual file has been added because the event can be triggered when removing file as well. — Shahar
– Shahar, Commented Sep 16, 2018 at 8:07

לבני מלכה · Accepted Answer · 2018-09-16 08:25:34Z

0

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>

edited Sep 16, 2018 at 8:25

answered Sep 16, 2018 at 8:13

לבני מלכה

16.3k2 gold badges26 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

לבני מלכה Over a year ago

tell for more help:)

Collectives™ on Stack Overflow

Change Label CSS when File Input has a value

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related