# Dashboard Button Node - \</\>Class Field not working

**URL:** https://discourse.nodered.org/t/dashboard-button-node-class-field-not-working/52651
**Category:** Dashboard
**Created:** [24 October 2021 09:53 UTC](https://discourse.nodered.org/t/dashboard-button-node-class-field-not-working/52651 "2021-10-24T09:53:12Z")
**Posts on this page:** 1
**Showing post:** 24

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [31 October 2021 14:11 UTC](https://discourse.nodered.org/t/dashboard-button-node-class-field-not-working/52651/24 "2021-10-31T14:11:40Z")

</div>

> [@zenofmud](#):
>
> > If a **Class** is specified, it will be added to the parent card. This way you can style the card and the elements inside it with custom CSS. The Class can be set at runtime by setting a `msg.className` string property.
> 
> but not all elements are styled.

They are, by the CSS selector **you** use in your styling. You can touch every element inside a card if you use the correct selector.

Example - using **`red`** as a class name on a `text-input` to set the `input` elements' background colour light red and the `label` elements' foreground colour red...

Any card with `red` class and containing a `label` or `input`

```CSS
.red label {
    color: red !important;
}
.red input {
    background-color: #e3bfbf8c;
}

```

  

To be more specific and **only** target ui-text-input labels and inputs ...

```CSS
.nr-dashboard-textinput.red label {
    color: red !important;
}
.nr-dashboard-textinput.red input {
    background-color: #e3bfbf8c;
}

```

  

Lastly, to be ultra specific (note how the `!important` hack is not needed now)...

```CSS
md-card.nr-dashboard-textinput.red > md-input-container.md-block > label {
    color: red;
}
md-card.nr-dashboard-textinput.red > md-input-container.md-block > input {
    background-color: #e3bfbf8c;
}

```

* * *

The thing to realise is how would the dashboard style elements without its own classes? So to override them we need to be specific. The new `class` field permits you to target groups of elements (thus permitting consistent styles across multiple widgets) but you still have to target the things to style.

Lastly, to be able to use a simple single class name to override specific parts, every style-able element inside the card would need its own class entry and its own input on the editor to allow you to set a class against each internal part. e.g. a button is not just a button - there is a `ui-icon` element, a `span` and a `div` nested inside it.

Alternatively: If instead of putting the class into the cards class list (as we do now) we instead put the class on the button element - you still wouldnt be accessing the "visually styled" parts (which are the icon, span and div). And you wouldnt be able to style the parent container(s) either.

  

I do agree you need a level of knowledge as to what is inside the card (to be able to target them) but that goes with the territory. What may be beneficial, to help others, would be to put together a list of selectors that will affect what part of a widget.

something like...

| widget | element | selector |
| --- | --- | --- |
| any card | md-card | `md-card.YOUR-CLASS-HERE` |
| text input | label | `md-card.nr-dashboard-textinput.YOUR-CLASS-HERE > md-input-container.md-block > label` |
| text input | input | `md-card.nr-dashboard-textinput.YOUR-CLASS-HERE > md-input-container.md-block > input` |
| etc | etc | `etc` |

* * *

Final tip: you can set multiple classes to combine styles e.g. `blue-card bold-p-label underlined-label` would allow you to combine 3 sets of styling

---

_[View the full topic](https://discourse.nodered.org/t/dashboard-button-node-class-field-not-working/52651)._