{"revision":"c10276e953456835cdbb1f3a60d58ae1980be353","document":{"id":39791,"path":"platform-administration/t_DefineFieldStyles.md","title":"Define field styles","bundle":null,"doc_type":null,"release":"australia","body":"\n# Define field styles\n\nField styles enable you to declare individual CSS styles for a field in a list or form.\n\n## Before you begin\n\nRole required: personalize\\_styles or admin\n\n## About this task\n\nThe CSS lets you change the following attributes of a field.\n\n-   Change the color.\n-   Change the font attributes \\(bold, italics, underline\\).\n-   Change the padding and alignment of text.\n\nYou can define field styles for tables and database views in the same scope as the field style. You can also define field styles for other tables that have at least one field in the same scope. Field styles defined for a table don’t apply to database views that include the table. Create separate field styles for database views.\n\n**Note:** Field styles aren’t applied to comments and work notes fields used with the activity formatter. Background color for these fields can be set using the **glide.ui.activity\\_stream.style.comments** and **glide.ui.activity\\_stream.style.work\\_notes** system properties located in the sys\\_properties table.\n\n## Procedure\n\n1.  Navigate to the list of styles for the field in one of the following ways.\n\n    -   Right-click the field label on the form and select **Configure Styles**.\n    -   Navigate to **System UI** &gt; **Field Styles**, and locate the field to apply a style \\(admin only\\).\n2.  Select **New**, or select the style to modify.\n\n3.  Complete the form.\n\n<table id=\"table_jzt_1mz_qp\"><thead><tr><th>\n\nField\n\n</th><th>\n\nDescription\n\n</th></tr></thead><tbody><tr><td>\n\nTable\n\n</td><td>\n\nTable that contains the field. **Note:** The list shows only tables and database views that meet the scope protections for field styles.\n\n</td></tr><tr><td>\n\nField name\n\n</td><td>\n\nThe field to which the style applies.\n\n</td></tr><tr><td>\n\nValue\n\n</td><td>\n\nThe exact value or script-based-condition required to apply the style.**Note:** Leave the **Value** field empty to apply field styles to UI16 forms. Specify a value in the **Value** field to apply field styles to UI16 lists.\n\nField styles aren't supported for Workspaces.\n\n</td></tr><tr><td>\n\nStyle\n\n</td><td>\n\nThe CSS style to apply.For example, to make the background of the Incident Category fields red in record lists, with a 24-px font size and white text color, enter the following code.\n\n```\nbackground-color:red;\nfont-size:24px;\ncolor:white;\n```\n\n</td></tr></tbody>\n</table>    You can use a script-based-condition with the syntax `javascript:<script>` in the **Value** field to determine whether the system should apply a style to a field in the list. If the evaluated script returns true, the system applies the style to the list item.\n\n    The script has access to the **current** script object, which enables you to build conditions based on the field values of the current record. For example, this script checks for overdue items based on a field value:\n\n    ```\n     javascript:gs.dateDiff(gs.now(), current.u_datefield.getDisplayValue(), true) < 0\n    ```\n\n    **Note:** In this example, `current.u_datefield` refers to the name of a custom date field.\n\n    The system only supports one `javascript:<script>` entry in a **Value** field. If you want to enter multiple JavaScript conditions, consolidate the conditions into one statement. For example, instead of this invalid entry:\n\n    ```\n    javascript: current.state == \"Completed\" javascript: current.error_tables > 0\n    ```\n\n    Consolidate the conditions into one statement such as:\n\n    ```\n    javascript: current.state == \"Completed\" && current.error_tables > 0\n    ```\n\n4.  To add alternative text for a style, [configure the form](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/platform-administration/configure-form-layout.md) to add the alternative text field.\n\n    For styles like the VIP style icon, you can add alternative text so that screen readers can differentiate between the style and the text.\n\n5.  Select **Submit** or **Update**.\n\n\n**Parent Topic:**[Customizing fields on the ServiceNow AI Platform](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/platform-administration/customize-fields-now-platform-landing.md)\n\n"}}