Change background color of an Edit field

  • 1
  • Question
  • Updated 3 years ago
Is there a way to dynamically change the background color of an Edit field?   the default is a lovely gold color, but we would like to vary this color for some fields as a way of highlighting the contents.

have a render snippet and have applied changes to the field.element.css background color but this is being overriden by .nx-field and dont seem to be able to change this.

thanks
Photo of Digby Bartosh

Digby Bartosh

  • 100 Points 100 badge 2x thumb

Posted 3 years ago

  • 1
Photo of Stephen Chan

Stephen Chan

  • 956 Points 500 badge 2x thumb
There two answers are helpful:

https://community.skuid.com/skuid/topics/changing-the-color-of-text-from-field-in-edit-mode-via-css

https://community.skuid.com/skuid/topics/change_field_color

By combining Glenn's solution and taking Rob and Ben's advice on css specificity I think you are probably just missing making your css a little more specific. For an edit field you need to add the input selector as the Skuid CSS background-color is applied at that level. The following render snippet and CSS works for me on an edit field:

var field = arguments[0], value = skuid.utils.decodeHTML(arguments[1]); 
skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field, value); 
if (field.mode == 'edit' && value == 'ValueForRed') { 
    field.element.addClass("RedBackground");
}

.RedBackground input {
    background-color: #F99;
}
Photo of Digby Bartosh

Digby Bartosh

  • 100 Points 100 badge 2x thumb
Awesome, works perfectly!!  thanks for your help!