Change the background colour of form entry

Forums Dynamic Forms for SharePoint Change the background colour of form entry

Viewing 5 reply threads
  • Author
    Posts
    • #35919
      Phil Grant
      Participant

      Hi,
      I have a form that has lots of data entries and I want to target one or two fields and change their background colours to highlight them in the display and edit forms, I’ve tried adding the CSS styling in the “Field CSS” tab but it doesn’t seem to work, even with !important.
      The field is a dropdown selection on the input form rather than a text input so I’ve tried
      input{ background-color:#ffcccc!important; }
      and
      select{ background-color:#ffcccc!important; }
      without success, any suggestions on how I can achieve this?

      Thanks

    • #35920
      SteveE
      Participant

      For EditForm:
      In Custom JS add this
      jQuery(“#dffs_Dropdown select”,”dffs_Dropdown2 select”).css(‘background-color’,’#ffcccc’);

      For DispForm:
      In Custom JS add this
      jQuery(“#dffs_Dropdown td.ms-formbody”,”dffs_Dropdown2 td.ms-formbody”).css(‘background-color’,’#ffcccc’);

      In DispForm it highlights the entire cell so you may want do change it to just ‘color’ and you’ll just change the color of the text.

    • #35922
      Alexander Bautz
      Keymaster

      Hi Phil,
      The code you have used should work – are you sure you have it in the correct form? – also, DispForm there are no select or input so you must style the td instead:

      td{
      background-color:red!important;
      }
      

      Alexander

    • #35923
      Phil Grant
      Participant

      Thanks, I thought it would be just me not understanding how to reference something!

    • #35930
      Phil Grant
      Participant

      Still no luck, does it matter if the field is part of an SBS?

    • #35931
      Alexander Bautz
      Keymaster

      It could be, but the above code colors ALL the td’s in my test form. If you use the developer tools (right click > inspect) and look at the style section you can see all styles applied – and any styles that are overridden (shows with strikethrough).

      PS: Use the new Edge Chromium or Google Chrome when debugging.

      Alexander

Viewing 5 reply threads
  • You must be logged in to reply to this topic.