change color or browse file button

Hi @andrew55,

Can you please clarify using a screenshot, which button you are referring to? (I just want to make sure we are talking about the same one)

As a quick tip, you can determine the computed css style of that item by right clicking on it and selecting “inspect element” with most modern browsers. The computed css style will be shown in the element panel and you can see which properties correspond to making that button look the way it does. (And trace those properties back to their definitions in the css files.) Doing this may speed up your resolution and you may not need to post the screenshot as indicated above.

Here is the screenshot:

https://www.visionrise.com/Capture.JPG

I am trying to change the background color/font color or the gray “Browse…” button.

I am familiar with and have used “inspect” in chrome, but I can’t figure how to change this particular button. Thanks for any suggestions.

Hi @andrew5,

The stye to change for that button is the “wpas-form-control” class of the “file” type sub element. (If you are familiar with css selectors, ensure that you are editing noly the “file” type element of class types “wpas-form-control”)

Or you could reference it by id (less preferred) id: “wpas_files”.

Hope that helps! Please let me know if you have more questions. I’ll mark as resolved for now.

I’ve tried with no success. Is it possible for you to provide an example of the css?

Thanks for any help.

Hi @andrew55,

Taking a closer look, I now see the exact issue you are facing. There is a way to solve this (Normally the file upload box is a browser control which cannot be further styled aside from style marking around it (inside the DIV container etc.) However, it is possible to overlay this input control on top of a styled button while setting the input control to have full opacity.

See these examples:
https://stackoverflow.com/questions/12578749/how-change-text-and-color-of-button-browse-of-input-file
https://jsfiddle.net/hrYn2/6/

I looked at what you sent, but I still can’t seem to style the button. The closest I could get was this…

input[type="file"] {
	position: relative;
	left: -1px;
	background-color: #FFCC00;
	color: #000000;
}?

…but that styles the area around the button, but not the button itself.

Any help would be greatly appreciated.

Maybe someday you folks can even create a regular button there (like the rest of your plugin’s buttons) which can easily be styled. A simple class on the button would be great. Just an idea!

Having the option to style the button would be great, as it’s very important for many users. But the way it is now, it’s difficult to see, especially on smart phones (which so many people use these days).

Hi @andrew55,

I think the solution in the stack-overflow link may help, especially the part mentioning: “opacity:0;”

If you make the file input type invisible, then stylizing the background div element to include a background image, or some other CSS style to indicate that it’s a file input box then that should do the trick.

The reason the CSS cannot easily stylize the browser file upload control I believe is because it’s partially passed back to the browser from the OS library for file control within the OS. That means that stylizing that button has some cross-platform limitations.

Another alternative as well is to use the “Drag-n-Drop File Uploads”:
https://getawesomesupport.com/documentation/awesome-support/admin-file-upload-options/

Hope that helps!

I’m still lost on how to implement this. I’ve been messing with css with luck. Do you have a specific code snippet example I can use for styling the button?

Possibly the quickest example is shown in this fiddle:
https://jsfiddle.net/hrYn2/6/

Basically making the opacity of the file selector fully invisible, and then ensuring that there is an element just below that it looks like the control that you want.

There is a good example on this page too: https://www.quirksmode.org/dom/inputfile.html

The code snippet from the “The HTML/CSS structure” section of the above link looks like the most clear way to accomplish.

In that example they may the file selection box invisible and apply the style to the underlying div.

Hope that helps!

I’m still not able to get anywhere with this. From what I can tell, it seems the methods you suggested would require modifying the core files of your plugin?

It also seems the second method uses additional javascript.

Not sure how to go about this. Any suggestions greatly appreciated.

As of now, because of the way it looks on mobile devices, the “Browse…” button is almost obsolete.

Hi @andrew55,

Instead of modifying the core plug-in, you could do these steps:
1) Set the opacity of the browse control to 0 (invisible)
2) Change the style of the background div to include an image (like a modern looking browse button) that is positioned within the div at the same location of the invisible browse control.
3) Optionally use CSS to enable a hover effect that swaps the button image to make it look more active.

The key to this method is making sure that your new style button is superimposed in the same location as the invisible browse button. Though the “Drag-n-Drop File Uploads” may be an easier to manage alternative to the above.

Hope that helps!