cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Nintex Newbie

How do i use CSS to change clicked button colors?

Jump to solution

Hi,

I have a form I am creating with about 40 choice fields that I am rendering as buttons.  I would like the buttons to stand out more and would like to change the default from white to maybe orange.

Is there an easy way to set this globally on the form?

0 Kudos
Reply
8 Replies
Highlighted
Nintex Newbie

Re: How do i use CSS to change clicked button colors?

Jump to solution

This should be possible via a custom css class that you have to apply to all desired controls. There's a a thread with a short explanation by Jan Eyres‌, hope this will help you:  

0 Kudos
Reply
Highlighted
Automation Master
Automation Master

Re: How do i use CSS to change clicked button colors?

Jump to solution

Just to clarify, are you asking how to change the color of the button "always" or only after it is clicked, or only while it is being clicked?

0 Kudos
Reply
Highlighted
Nintex Newbie

Re: How do i use CSS to change clicked button colors?

Jump to solution

Hi

Add a custom css class to your control

Then in form settings under custom css add the following:

.buttons .ui-button{
background-color: orange;    
background-image: none;
}‍‍‍‍‍‍‍‍

This will make all buttons orange

If you want to change the selected button colour, add these extra lines

.buttons .ui-state-active{ 
background-color: lightgreen;
background-image: none;
}‍‍‍‍‍‍‍‍

This will make the selected option lightgreen.

PLEASE play with the colours, i am a developer not a designer!!

Paul

View solution in original post

Reply
Highlighted
Nintex Newbie

Re: How do i use CSS to change clicked button colors?

Jump to solution

Thanks for the suggestions I will try these out.   I am assuming there is no way to set this globally on the form and each control needs to reference the css function we add

0 Kudos
Reply
Highlighted
Nintex Newbie

Re: How do i use CSS to change clicked button colors?

Jump to solution

Hi

Yes you will need to add the class to each control

0 Kudos
Reply
Highlighted
Nintex Newbie

Re: How do i use CSS to change clicked button colors?

Jump to solution

Hi Paul,

 

I have added the cstom CSS and it shows up fine on the designer, however when i preview or publish the form it does not pick up the changes. I would like to mention that there is custom JS running on the same control as well. not sure if that is making any difference. i have attached the screenshot of my control settings as well as form settings. 

 

 

0 Kudos
Reply
Highlighted
Nintex Newbie

Re: How do i use CSS to change clicked button colors?

Jump to solution

Hey, came across this post and just wanted to give closure to others like myself looking for a happy ending solution.  Above is all good, just need to add !important to override other default css that applies to rest of form, so something like this for example:

.buttons
label:not(.ui-state-active) .ui-button-text{    
background-color: silver !important; color:white;   height:100% !important
}

.buttons .ui-state-active{ 
background-color: #0072c6 !important; background-image: none; }
0 Kudos
Reply
Highlighted
Nintex Newbie

Re: How do i use CSS to change clicked button colors?

Jump to solution

Hi

I found this article extremely useful and have successfully implemented the code.  I still need, however, to change the border colours of the buttons (currently red) as well as the highlight colour when you position your mouse over the choice button (it has a background of a pinkish red with white highlight and black text).  I have tried different options but cannot get it to work.

 

I really appreciate your help.  

0 Kudos
Reply