Button hover doesn't work for one but works for the other

Hello,

I've got two buttons on my form; one is a submit button at the end of the form and the other one is "Upload file" button as part of file upload element.

I'm trying to apply the same style for both buttons - same color, shape, and mouse-hover effect. But can't seem to do it.

I use the same css injection for both buttons, but it doesn't work as expected. It works for both buttons when I hover my mouse when I'm building the form, but when I preview the form or when I publish the form, it only works for "Submit" button and not the other button. 

Screenshot of the css injection included below.  

Can you please check again on your side. I never applied any update on the CSS but refreshed the form only, and it appears to have fixed the issue.

I see the mouse-over button effect in the Upload field also.

Let us know if issue persist.

Hello, 

Thank you for that. It might be my local cache somewhere then. It's great if that's the case. 

Would you be able to confirm with the following form? Whether the two buttons change color on mouse hover? https://form.jotform.co/StreamlineWA/submission_only_form

Thanks.

It seems you were using the wrong class to inject the CSS. I have updated the CSS.

Please check now.

Thanks.

It works now. Thank you!

What about changing background color of a widget? I cannot do this using Advance CSS tool as I can't select the widget there. 

I need to change as per screenshot below.

Please inject the following custom css code in your "Checkbox in Dropdown" widget and that should solve your problem:

.selecter-selected {

    background: url(https://widgets.jotform.io/checkboxInDropdown/img/carret.png) no-repeat scroll right center #fff !important;

}

Please check the following guide on how to inject custom css code in the widget:   https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets

Hope this helps.

Do get back to us if you have any questions.

Thank you.