Coloring Yes/No Fields

I want to color a Yes/No Field
Yes would show in green
No would show in red

Looking thru the forum, I found some reference to this, but don't see the complete code...

this is what I have that I know is wrong and not working. Suggestions on how to fix?

trying to add to the default code that is already there


fd.spRendered(function () {
// This code is executed once the form is rendered

// Populating Resolution Date with the current date when a user sets
// Status field to 'Resolved'
fd.field('Status').$on('change', function (value) {
    if (value === 'Resolved') {
        fd.field('ResolutionDate').value = new Date();

fd.spRendered(function() {
if (fd.field('_x0031__x002e__x0020_Are_x0020_t').value = FALSE){
$(fd.field('_x0031__x002e__x0020_Are_x0020_t').$el).k-switch-on .k-switch-container {
background-color: red !important;

Hello @eweiler,

There is no need in a code for this. You can change the color of the Yes-No toggle using the CSS:

.form-switch > .form-check-input:checked{
    background-color: green !important;
    border-color: green !important;

.form-switch > .form-check-input{
    background-color: red !important;
    border-color: red !important;

thank you!

I do need a little more explanation...sorry

I put this code in the CSS panel at the top of the Forms program and it didn't do anything

I put this code in the style parameter of the cell properties and it color the yes/no field as red no matter the value.

thanks for giving me some additional direction.


Thank you for the screenshot!

The CSS class differs depending on the mode of the field. Please use this code for the Advanced mode:

.k-switch-on .k-switch-container {
    border-color: #37a448 !important;
    background-color: #37a448 !important;

.k-switch-off .k-switch-container {
    border-color: #E91E63 !important;
    background-color: #E91E63 !important;

thanks, can you clarify where this goes?

I placed it in the SharePoint Field properties in cell properties/style, general/style and all it does was turn it red, no matter the field value.

Thanks again


You need to place the code to the CSS editor, Current Form tab:


Thank you! that took care of toggling the colors when the form is in New or Edit mode.

How do I color code the answers in Display Mode?


Hello @eweiler,

On a Disapply form you should use the code:

var booleanField = $(fd.field('FieldName').$parent.$el)
if(fd.field('FieldName').displayValue == 'Yes'){
    booleanField.find('.fd-field-control').css("background-color", "#37a448 ")

if(fd.field('FieldName').displayValue == 'No'){
    booleanField.find('.fd-field-control').css("background-color", "#E91E63")

You need to place the code to the JS editor inside the spRendered() function like so:

You are Awesome!! thank you

1 Like