Hey,
I’m almost certain that you can’t style an file input button, and even if one browser allowed you to the results would be inconsistent across the various browers and devices.
What you can do is hide the button and style the label, as far as I know all the mainstream browsers and devices recognise a click on the label in the same way as clicking on the button.
I found this article, seems to cover it well: https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/
Now before you start adding in your own CSS, I suggest you go into the Ajax Uploads settings page (Forms -> Settings -> Ajax Upload) and untick the CSS styles option. Otherwise you might get conflicts with the default styles.
Because styling like this is verging on hacking up what a browser is expecting you’ll need to test thoroughly.
Something like this will style up the single ajax upload field
.itsg_single_ajax input.itsg_ajax_upload_browse {
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
width: 0.1px;
z-index: -1;
}
.itsg_single_ajax fieldset label {
background-color: black;
color: white;
display: inline-block;
font-size: 1.25em;
font-weight: 700;
}
.itsg_single_ajax:focus fieldset label,
.itsg_single_ajax:hover fieldset label {
background-color: red;
}
.itsg_single_ajax fieldset legend {
margin: 10px 0;
}
.sr-only {
border: 0 none;
clip: rect(0px, 0px, 0px, 0px);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
Pic: https://oi64.tinypic.com/9ia354.jpg
Styling up the upload button in a ‘list field’ will require a lot more thought because it uses the single label at the top of the column.
