How can I customize File Upload Buttons?

I understand how to customize Submit buttons using Button Style or Design/CSS.

However, I am not successful in changing the button colors for file uploads. I have seen several posts on this topic, but they are dated and there may be new functionality available. Additionally, when attempting to use the posted CSS, no changes were applied.  I did not find anything on adjusting Widget Buttons.

I am testing two types of file uploads:

One is using the Basic File Upload button and the other is using a Widget.

 

How can I customize the file upload buttons (Basic Field Image Upload and Image Upload Preview Widget) to look like the Submit Button.

 

https://form.jotform.com/63583482173966

Thank you,

 

 

That's an interesting point you have that I don't think was considered much before other than creating workarounds for such with injected css. Thanks for bringing this to our attention again.

I also think this would be something useful to have if built-in though for now yes, the only way would be through custom css to customize the styling of your upload buttons.

It is possible to use simple css to customize the basic file upload field but, for widgets if the widget doesn't support css then no this would not be possible.

How were you trying to style them roughly?

 

Yes, I agree. I think for the basic built-in file upload button there should be an option similar to the submit button.  If available for one, I would think it could be made available for the other.

I am not sure if the CSS works because when applying to the basic file upload button I was not able to have any luck.

I am trying to get the upload button roughly like the Submit button.  It could be basic blue (or any darker color) background and white text. 

The upload widget I am using does support CSS.

The challenge is that I have a white background and the buttons essentially blend in, which may make it easy to overlook.  This field will be a required field and I want to ensure users upload the required file.

Any assistance is greatly appreciate it.

Thanks!

The following codes below is for the "Select Image" button in the Image Upload Preview widget in your form.

button#pickImage{

    color: #eeeeee !important;

    background: #1c0f6d !important;

    box-shadow: none !important;

    text-shadow: none !important;

    border: 1px solid #0d4aab !important;

}

button#pickImage:hover{

    text-shadow: -1px -1px 0px #003ea1 !important;

    border: 1px solid #0d4aab !important;

    -moz-box-shadow: inset 0px 1px 0px 0px #97c4fe !important;

    -webkit-box-shadow: inset 0px 1px 0px 0px #97c4fe !important;

    box-shadow: inset 0px 1px 0px 0px #97c4fe !important;

    background: #1e62d0 !important;

    background: -moz-linear-gradient(top, #3d94f6 0%, #1e62d0 100%) !important;

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3d94f6), color-stop(100%,#1e62d0)) !important;

}

button#pickImage::before {

    background-image: url(https://cms.jotform.com/uploads/image_upload/image_upload/Mike_G/39360_download.png) !important;

}

button#pickImage:active {

    transform: translateY(2px) !important;

}

As instructed by my colleague above, the codes above need to be added in the custom CSS tab of the widget.

With regards to the "Choose File" button of the basic File Upload field, you can add the following CSS codes below to your form. https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

input#input_3:before {

    content: "Choose File" !important;

    -webkit-appearance: button !important;

    -moz-appearance: button !important;

    appearance: button !important;

    cursor: pointer !important;

    position: absolute !important;

    padding: 3px !important;

    width: 80px !important;

    text-align: center !important;

    color: #eeeeee !important;

    background: #1c0f6d !important;

    box-shadow: none !important;

    text-shadow: none !important;

    border: 1px solid #0d4aab !important;

}

input#input_3:hover::before {

    text-shadow: -1px -1px 0px #003ea1 !important;

    border: 1px solid #0d4aab !important;

    -moz-box-shadow: inset 0px 1px 0px 0px #97c4fe !important;

    -webkit-box-shadow: inset 0px 1px 0px 0px #97c4fe !important;

    box-shadow: inset 0px 1px 0px 0px #97c4fe !important;

    background: #1e62d0 !important;

    background: -moz-linear-gradient(top, #3d94f6 0%, #1e62d0 100%) !important;

}

input#input_3:active::before {

    transform: translateY(2px) !important;

}

Or, you can also try to enable the "Allow Multiple" option of basic File Upload field.

Then, set the maximum number of files allowed to 1 (if you don't want your respondents to upload more than 1 file) and its Button Style to "Simple Blue" similar to your "Submit" button.

You can also apply the CSS codes below to your form instead (If "Allow Multiple" is enabled)

.qq-upload-button-hover{

    text-shadow: -1px -1px 0px #003ea1 !important;

    border: 1px solid #0d4aab !important;

    -moz-box-shadow: inset 0px 1px 0px 0px #97c4fe !important;

    -webkit-box-shadow: inset 0px 1px 0px 0px #97c4fe !important;

    box-shadow: inset 0px 1px 0px 0px #97c4fe !important;

    background: #1e62d0 !important;

    background: -moz-linear-gradient(top, #3d94f6 0%, #1e62d0 100%) !important;

}

Here's the form where I have applied the changes above: https://form.jotform.com/63584937334971

I hope this helps. If you need any further assistance, please feel free to contact us again anytime

Thank you.

This is great.  I appreciate the assist and it worked.

I customized my form and tested.  However, for the Widget - after attaching the file, the "Trash" and "Upload Image" buttons are the gray colors (having the same issue with blending into a white background). Is there way to customize these button colors?  Preferably to the same colors as with the select button.

Thanks,

 

Please try adding the below CSS in Custom CSS field of the Image picker:

button#deleteImage {

 color: #eeeeee !important;

    background: #1c0f6d !important;

    box-shadow: none !important;

    text-shadow: none !important;

    border: 1px solid #0d4aab !important;

}

button#uploadImage {

 color: #eeeeee !important;

    background: #1c0f6d !important;

    box-shadow: none !important;

    text-shadow: none !important;

    border: 1px solid #0d4aab !important;

}

If you have any further questions please let us know.

Thank you!

 

Thanks.  It works with the exception that now the black icons on the buttons do not show up.  So, I used a lighter background and changed the text to black. I could also use the hover color for consistency.  The solution provided works great.

 

 

Thanks for the assist!

 

Regard,