Form Apply button color

[Maud67]

Hi,

I searched for the answer but unfortunately I could not find it. Sorry.

I added a class in the form for the apply-button.
When I add the class in the user.css of the template the following works:

.btn-primary1 {background-color: green}
.btn-primary1:hover {background-color: blue)

This is not working:

.btn-primary1:active {background-color: blue}
.btn-primary1:visited {background-color: blue}
.btn-primary1:focus {background-color: blue}

The colour of the button must be blue when the user hit the apply-button. But it goes back to or stays green. How can I solve this?

Thanks a lot!

 

[cheesegrits]

It's a <button ...>, not a link styled as a button, so it has no "visited" pseudo property.

You'd have to add a little custom JS to the form to do it, in ./components/com_fabrik/js/form_X.js (where X is your numeric form ID), as per this:

https://stackoverflow.com/questions/42134731/css-change-button-style-after-click

You can either use a class which you can add to the custom CSS in your Fabrik form template, or just style it with .css() rather than adding a class.

-- hugh

 

[Maud67]

Hi Hugh,

Thanks for responding. The JS solution is a nice one. I learn everyday. Thanks a lot!