List Item: Choice - Selection

I'd like to change the text color based on the selection. For Example.

Column Name Red (choice 1, red txt) Blue (Choice 2, blue txt) Yellow (choice 3, yellow txt)

  • Where exactly you want to change the color... In new item form? Or where? Dec 26 '17 at 20:48
  • If possible I'd like to change the text color of ALL the txt fields in a view. If not, just the specific column text would be fine. So if the column asked what color the user liked. They pick red, all the fields in that item become red. Or atleast just the field where they picked the color.
    – Daniel
    Dec 26 '17 at 20:57
  • A more practical example would be a STATUS field right. Good, Bad, Neutral. I'd like to change the txt color of the options once selected to Green, Red, Yellow. That way they pop a little in the list
    – Daniel
    Dec 26 '17 at 20:58
  • 1
    You can try this code on your SharePoint list. Just change your column name in this code: sharepoint.stackexchange.com/questions/181492/… Dec 27 '17 at 9:30

You need to use (CSR) Client Side Rendering for more information about it, please go to below links :


Put this below code in content editor webpart or in JS file and connect it with JSLink property to your webpart.

Here it is using priority field. You can use your desired field.


(function () {

    // Create object that have the context information about the field that we want to change it's output render 
    var priorityFiledContext = {};
    priorityFiledContext.Templates = {};
    priorityFiledContext.Templates.Fields = {
        // Apply the new rendering for Priority field on List View
        "Status": { "View": priorityFiledTemplate }



// This function provides the rendering logic for list view
function priorityFiledTemplate(ctx) {

    var priority = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
    var color = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];

    // Return html element with appropriate color based on priority value
    switch (priority) {
        case "Choice 1":
            return "<span style='color :#f00; background-color:#f00;'>" + priority + "</span>";
        case "Choice 2":
            return "<span style='color :#ff6a00; background-color:#f6a00;'>" + priority + "</span>";
        case "Choice 3":
            return "<span style='color :#cab023; background-color:#cab023;'>" + priority + "</span>";

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.