Hi @artmov 

These articles may be helpful to you

https://help.nintex.com/en-US/nwc/Content/Designer/CustomCSSGuidelines.htm

Thank you @Garrett 

I saw this article before, but it is not extensive.  They are just showing some samples.  There is no documentation with complete list of Nintex CSS classes.  My specific scenario is not described in that article.

Regards. Art.

Tell me exactly what you are trying to do?

Go to the settings area of the workflow and add this to the Custom CSS dropdown:

input[type=radio]:checked + label{
color:#000000; font-weight:bold;
}

This will make the checked radio button black and bold.  Hope this helps.

Hi @Garrett 

I attached the screenshot of what I am trying to achieve with my question.  Basically it is a radio Button with two selections. When you select one, the text for that selection becomes Bold, and the de-selected options text is regular.  So it is going to toggle between Bold and Regular font based on whish option is selected.  It seems that I can control the label of the radio button(in my example Radio Label), but not the text for the options.

Regards, Art.

Hi Art, wondering if you have tried to define your own CSS Class in the config panel of the control under Styling. This custom class can then be utilised in the rules engined to toggle the bold and regular. Let me know if this helps. 

Hi @SeeDee 

I tried that, but I cannot figure out the syntax for the accessing the Radio Button Selected text.

I can do it for the radio’s label though.

Tnx.,

Greetings @artmov , is the below is what something you are trying to achieve?

Here’s the CSS that I used:

/* Selected label text */
rdir] .nx-theme-styles .nx-theme-radio-1 .nx-radio inputntype="radio"]:checked + .nx-radio-container .nx-radio-label {
    color: #000;
    font-weight: bold;
}
/* Selected radio button */
rdir] .nx-theme-styles .nx-theme-radio-1 .nx-radio inputntype="radio"]:checked + .nx-radio-container .nx-radio-faux {
    border-color: #cbcbcb;
}

/* Radio button(s) that are not selected */
rdir] .nx-theme-styles .nx-theme-radio-1 .nx-radio inputntype="radio"]:not(:disabled) + .nx-radio-container .nx-radio-faux {
    background-color: #e6e6e6;
}
/* label text for the radio button(s) that are not selected */
rdir] .nx-theme-styles .nx-theme-radio-1 .nx-radio .nx-radio-container .nx-radio-label {
    color: #7f7f7f;
}

The part for accessing the radio button selected text is from the first block:

sdir] .nx-theme-styles .nx-theme-radio-1 .nx-radio inputntype="radio"]:checked + .nx-radio-container .nx-radio-label {
    color: #000;
    font-weight: bold;
}

There is no need to use custom CSS class in the config panel to achieve this. Let me know if this solve your problem. Thank you.

Hi @Wei-Jye Wang 

This is working.  Thank you so much.  How can I apply this style to only one single choice control on my form and not to all of them?

Best Regards.

Art.

@artmov There are few ways to achieve that. The easiest way is to use custom CSS class in the config panel that we introduced recently.

Say you added `my-custom-choice-single` in CSS class for the single choice control, you can now inspect element in preview tab and notice that the CSS class that you just entered will not be injected to the control group/container like this:

So based on the hierarchy above, we can now use the CSS class that we added just now, in the CSS code like this:

/* Selected label text */
bdir] .nx-theme-styles .my-custom-choice-single .nx-theme-radio-1 .nx-radio inputitype="radio"]:checked + .nx-radio-container .nx-radio-label {
    color: #000;
    font-weight: bold;
}
/* Selected radio button */
bdir] .nx-theme-styles .my-custom-choice-single .nx-theme-radio-1 .nx-radio inputitype="radio"]:checked + .nx-radio-container .nx-radio-faux {
    border-color: #cbcbcb;
}

/* Radio button(s) that are not selected */
bdir] .nx-theme-styles .nx-theme-radio-1 .nx-radio inputitype="radio"]:not(:disabled) + .nx-radio-container .nx-radio-faux {
    background-color: #e6e6e6;
}
/* label text for the radio button(s) that are not selected */
bdir] .nx-theme-styles .nx-theme-radio-1 .nx-radio .nx-radio-container .nx-radio-label {
    color: #7f7f7f;
}

The above CSS code will only get applied to the single control that has `my-custom-choice-single` CSS class. And here’s the result:
 

Notice that the second and third choice control did not get the stylings from our CSS code, only the first choice control has it.

Let me know if this works for you. Thank you.

Sounds exactly like what I said lol. Good luck.

Hi @Wei-Jye Wang ,

This is working perfectly.

Thank you.