Push Button, Change Color

The Nintex Form 'Choice Control' allows users to choose between different display formats, such as: 

  • Check boxes (Multiple-Selection)
  • Drop down list
  • List (Multiple-Selection)
  • Option Buttons

The Option Buttons display format initially appears as radio buttons, but what if we wanted them to show as actual buttons?

Change the 'Render as buttons' value from No (default) to Yes and the radio buttons will now appear as buttons.

This is a great feature of Nintex Forms, but what if you wanted to really change the value of the background color of a selected option button when selected? 

Here comes simple CSS to apply this change!

The Build

So far, all that has been placed on the form is a Choice Control, with the display format as 'Option Buttons' and the Render as buttons setting set to 'Yes'. If you have accomplished this already, you're ready for adding some CSS. If not, please add the control and make the required setting changes.

The Code

The Choice control is different in how it is displays in the DOM and you'll need to dig to see if there is an attribute associated with the selected button that will allow you to change the color. Using the Developer Tools (F12), walk through the DOM Explorer to find the choice control element.

So what does this look like in the DOM? There are two portions to pay attention to:

  • The button text is located in a <span> element, but there isn't any way to see if that <span> has been selected. 
  • The parent element of the <span> is a <label> element, which contains an attribute, aria-pressed="true". Now we got it!

Add the following code in your Custom CSS section under Form Settings in the Forms Designer and you can target the span element, who is a child of a label element, but only when the label element has an attribute of aria-pressed=true.

label[aria-pressed=true]>span {
    background-color: #73E1DF !important;
}

The Result

The hex code of the selected button can be any color, but this will give an idea of how easy it is to change a background color on the Choice control of your Nintex Form.