CSS: Styling a File Upload button

Hello JF

I just added a new file upload element

"Please upload your tax letter as a PDF file"

to replace the Uploadcare widget, which I renamed as "Please upload your tax letter as a PDF file - OLD" and set to hidden.

How do I style the new button to look like the button on the widget I just hid? (size, color, not-rounded, etc.)

Also, how do I prevent the subtitle from wrapping to a second line?

I REALLY wish all this styling stuff were menu driven!

Thanks

@rtolmach

Thank you for reaching out. 

I have taken a look, and believe this code may be what you need to style the new button. Please place this code in the CSS field in the Style menu.

.form-all .qq-upload-button {

  border-radius: 0px; !important;

  background: #94cbdc !important;

  border-color: #94cbdc !important;

  font-family: "Lucida Grande", sans-serif;

  text-shadow: none;

  box-shadow: none;

}

.form-all .qq-upload-button.qq-upload-button-hover {

 background: white; !important;

 border-style: solid; !important;

 border-color: #94cbdc; !important;

 border-width: thin; !important;

 border-radius: 0px; !important;

 transition: background .3s;

}

Please give it a try and let me know how it works.

Thanks, Hanne!

I tried it, but it did not work. I got lots of errors. See this screengrab:

Help, please?
Thanks!

Hi there,

Could you try removing the semicolons (;) before the !important text on the affected rows?

 border-radius: 0px; !important;
background: white; !important;
border-style: solid; !important;
 border-color: #94cbdc; !important;
 border-width: thin; !important;
 border-radius: 0px; !important;

If you would still get errors, please let us know.

Hello Laura

Thank you.

This is so odd. The button looks different in these three pages:

1.

Seen here

https://form.jotform.com/201197488978172

it looks OK (pale blue button and white text)

2.

Seen here

https://www.jotform.com/build/201197488978172

the button is dark blue with a gradient and rounded corners. Not what I want.

3.

Seen here

https://www.jotform.com/build/201197488978172/design

the button is the pale blue color we want, but the text is grey

Clearly, it should appear the same in all three places.

Please advise.

Thank you!

Robert

Oops - Also, the subtitle is still wrapping to a second line. How do I fix that?

Hi there,

The main reason that you see the button in different styles is the old default theme you are still using in your form.

The old default theme is not updated anymore and that is why it has bugs. I would recommend that you update the theme to the latest default theme.

You can check this cloned form to see how it will look with the new theme and the same styling you've applied in your form.

https://form.jotform.com/213091725088962

To clone it you can use instructions in the following guide.

https://www.jotform.com/help/42-how-to-clone-an-existing-form-from-a-url/

However, if you do not prefer to use the new default theme then you can inject the following CSS code into your form to fix the sub-label.

.qq-uploader {

    width: 263px ;

}

Let us know if you have any questions.

Thanks

Hi again,

You can use the following guide to see how you can change your form theme.

https://www.jotform.com/help/184-how-to-apply-a-theme-to-your-form/

Thanks