# Customize style elements using Rules

> For the complete documentation index, see [llms.txt](https://developers.thoughtspot.com/docs/llms.txt)

Source: https://developers.thoughtspot.com/docs/css-rules

# Customize style elements using Rules

The `rules` option in the `customCSS` object allows you to apply style overrides to UI components and elements that cannot be customized using the variables provided by ThoughtSpot, inline in your code without having to include a separate stylesheet file.

> **WARNING:** While the rules option allows granular customization of individual elements, note that the rule-based style overrides can break when your ThoughtSpot instance is upgraded to a new release version.

When defining rules for style overrides:

-   Use the correct style class and values in your rule statements.  
    To find the class name of an element:  
    
    1.  Right-click on the element and select **Inspect**.
        
    2.  Note the style class for the selected element in the **Elements** tab on the **Developer Tools** console.
        
    
-   Add the `_UNSTABLE` suffix to the `rules` property.
    

A rule is defined in a JSON notation for styles, rather than direct CSS.

```javascript
rules_UNSTABLE: {
      '{selector1}' : {
        "{css-property-name}" : "{value}",
        "{css-property-name2}" : "{value}"
    },
    '{selector2}'...
}
```

The `selector` to get the appropriate element may only require a simple standard `id` or `class` identifier like `.classname` or `#idName`, or it may need to be a complex CSS selector involving bracket syntax and other complex operators. The following are examples of selector syntax to try in the rules section to isolate a particular element:

-   `'.bk-filter-option'`
    
-   `'[id="bk-filter-option"]'`
    
-   `'[class="sage-search-bar-module__undoRedoResetWrapper"]'`
    
-   `'[class="className"] [aria-colid="6"]'`
    
-   `'[data-tour-id="chart-switcher-id"]'`
    

The following example shows how to change the background color of the **All Tags** and **All Authors** dropdowns on the **Home** page of the ThoughtSpot application.

```JavaScript
init({
    thoughtSpotHost: "https://<hostname>:<port>",
    customizations: {
        style: {
            customCSS: {
                rules_UNSTABLE: {
                    '[data-testid="select-dropdown-header"]':{
                    "background-color":"#ABC7F9"
                }
            }
         },
      },
   },
});
```

The following figure shows the style override applied using the preceding code example:

![selection dropdown style override](/docs/doc-images/images/selection-dropdown-after.png)