Styling "hui-input-number-entity-row"
- entity row for "input_number"
This post is dedicated to styling an "input_number"
entity defined with a "box"
type:
input_number:
test_number:
name: ...
min: ...
max: ...
step: ...
mode: box
icon: ...
If an "input_number"
entity is defined with a "slider"
type - then check this post for âslider entitiesâ.
Update (21.06.22): the post is updated with styles for MDC controls; old styles (see at the bottom of the post) do not work since 2022.3.
Warning: different browsers may display input_number
rows differently; here pictures from Chrome are provided by default.
Colored name:
Two methods are available:
â using a short â:host
â navigation;
â using a more detailed DOM navigation.
![image](https://community-assets.home-assistant.io/original/4X/f/4/0/f40f624c3429a01958ebb844764d64f24f77975f.png)
code
- type: entities
title: Colored name
entities:
- entity: input_number.test_number_2
name: Colored name (method 1)
card_mod: &ref_card_mod_red_text_host
style: |
:host {
color: red;
}
- entity: input_number.test_number_2
name: Colored name (method 1)
secondary_info: last-changed
card_mod: *ref_card_mod_red_text_host
- entity: input_number.test_number_2
name: Colored name (method 2)
card_mod: &ref_card_mod_red_text_dom
style:
hui-generic-entity-row $: |
.info {
color: red;
}
- entity: input_number.test_number_2
name: Colored name (method 2)
secondary_info: last-changed
card_mod: *ref_card_mod_red_text_dom
- entity: input_number.test_number_2
name: default
- entity: input_number.test_number_2
name: default
secondary_info: last-changed
How to style several rows:
![image](https://community-assets.home-assistant.io/original/4X/a/4/3/a4300ca9ac42433be32d4b693ea861dc160f0f4f.png)
Note that a common style may be overwritten for some particular entity.
code
- type: entities
title: Colored name for all entities
card_mod:
style:
.card-content:
div:
hui-input-number-entity-row $ hui-generic-entity-row $: |
.info {
color: orange;
}
entities:
- entity: input_number.test_number_2
name: Cannot be overwritten
style: |
:host {
color: red !important;
}
- entity: input_number.test_number_2
name: Overwritten style
card_mod: &ref_card_mod_overwritten_text
style:
hui-generic-entity-row $: |
.info {
color: red !important;
}
- entity: input_number.test_number_2
name: Overwritten style
secondary_info: last-changed
card_mod: *ref_card_mod_overwritten_text
- entity: input_number.test_number_2
secondary_info: last-changed
name: Colored name (common)
- entity: input_number.test_number_2
name: Colored name (common)
- entity: input_number.test_number_2
secondary_info: last-changed
name: Colored name (common)
Colored secondary_info:
![image](https://community-assets.home-assistant.io/original/4X/9/6/0/9605c662d0e21a9a355c35f6b42b138b01e43618.png)
code
- type: entities
title: Colored secondary_info for some entity
entities:
- entity: input_number.test_number_2
name: Colored secondary_info
secondary_info: last-changed
card_mod:
style:
hui-generic-entity-row $: |
.info .secondary ha-relative-time {
color: orange !important;
}
- entity: input_number.test_number_2
name: Different colors
secondary_info: last-changed
card_mod:
style:
hui-generic-entity-row $: |
.info .secondary ha-relative-time {
color: orange !important;
}
.info {
color: red;
}
- entity: input_number.test_number_2
secondary_info: last-changed
name: default
- entity: input_number.test_number_2
name: default
How to style several rows:
![image](https://community-assets.home-assistant.io/original/4X/d/5/8/d5807e3167cbd8748b82e3dc635bb988da7577e7.png)
Note that a common style may be overwritten for some particular entity.
But - the new style is working unstable in my setup (HA 2022.6, card-mod 3.1.5) - sometimes it is applied, sometimes notâŚ
code
- type: entities
title: Colored secondary_info for all entities
card_mod:
style:
.card-content:
div:
hui-input-number-entity-row $ hui-generic-entity-row $: |
.info .secondary ha-relative-time {
color: cyan !important;
}
entities:
- entity: input_number.test_number_2
secondary_info: last-changed
name: Colored sec.info (common)
- entity: input_number.test_number_2
name: Overwritten color (unstable)
secondary_info: last-changed
card_mod:
style:
hui-generic-entity-row $: |
.info .secondary ha-relative-time {
color: orange !important;
}
- entity: input_number.test_number_2
secondary_info: last-changed
name: Colored sec.info (common)
- entity: input_number.test_number_2
name: default
Colored icon:
Two methods are available:
â using a CSS variable;
â using a CSS property with a detailed DOM navigation.
![image](https://community-assets.home-assistant.io/original/4X/0/1/1/01187dd85ff43856bb0dfcad717cb584a94dbfd1.png)
code
- type: entities
title: Colored icon for some entity
entities:
- entity: input_number.test_number_2
name: 'Colored icon (method #1)'
card_mod:
style: |
:host {
--paper-item-icon-color: red;
}
- entity: input_number.test_number_2
name: 'Colored icon (method #2)'
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
color: red;
}
- entity: input_number.test_number_2
name: default
How to style several rows:
![image](https://community-assets.home-assistant.io/original/4X/2/0/2/202e4ca01b7bcd60e9c724feee6941540e01e273.png)
Note that a common style may be overwritten for some particular entity.
code
- type: entities
title: Colored icon for all entities
card_mod:
style: |
ha-card {
--paper-item-icon-color: cyan;
}
entities:
- entity: input_number.test_number_2
name: Overwritten color
card_mod:
style: |
:host {
--paper-item-icon-color: red;
}
- entity: input_number.test_number_2
name: Colored icon (common)
- entity: input_number.test_number_2
name: Colored icon (common)
Some other styles for an icon - resized icon, hidden icon:
![image](https://community-assets.home-assistant.io/original/4X/b/d/f/bdf26e8c240aef23a885d34fa9952104bebfea6e.png)
code
- type: entities
title: Other styles for icon
entities:
- entity: input_number.test_number_2
name: resized icon
card_mod:
style: |
:host {
--mdc-icon-size: 40px;
}
- entity: input_number.test_number_2
name: hidden icon
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
display: none;
}
Colored value:
![image](https://community-assets.home-assistant.io/original/4X/5/7/9/57933a38c5d542b302bc68397674ba2823624cb7.png)
code
- type: entities
title: Colored value
entities:
- entity: input_number.test_number_2
name: colored value
card_mod:
style: |
:host {
--mdc-text-field-ink-color: red;
}
- entity: input_number.test_number_2
name: default
Colored UoM:
By default a UoM label is colored by â--secondary-text-color
â; you may specify any color or set it equal to â--primary-text-color
â.
![image](https://community-assets.home-assistant.io/original/4X/3/8/a/38ae0f58d14f11d6d992561f0825b32d29cb345c.png)
code
- type: entities
title: colored UoM
entities:
- entity: input_number.test_value_uom
name: red
card_mod:
style: |
:host {
--secondary-text-color: red;
}
- entity: input_number.test_value_uom
name: primary-text-color
card_mod:
style: |
:host {
--secondary-text-color: var(--primary-text-color);
}
- entity: input_number.test_value_uom
name: default
Colored fieldâs background:
![image](https://community-assets.home-assistant.io/original/4X/e/c/0/ec09676d35ebeede1994bcda68c3e1f721ddc93f.png)
code
- type: entities
title: Colored background
entities:
- entity: input_number.test_number_2
name: colored background
card_mod:
style: |
:host {
--mdc-text-field-fill-color: lightgreen;
}
- entity: input_number.test_number_2
name: default
Colored underline:
The underline had 3 possible states:
â a default (static) state;
â the input field is hovered by a mouse;
â the input field is selected by a mouse.
There are CSS variables for each state.
In the example below:
â the 1st row is modded by using these CSS variables;
â the 2nd row is modded by changing CSS properties with a detailed DOM navigation;
â the 3rd row has transparent underlines.
![in](https://community-assets.home-assistant.io/original/4X/3/0/8/308898e54f1a2b7ee61f6d36c8a69b16854d146c.gif)
code
- type: entities
title: Colored underline
entities:
- entity: input_number.test_number_2
name: method 1
card_mod:
style: |
:host {
--mdc-text-field-idle-line-color: red;
--mdc-text-field-hover-line-color: cyan;
--mdc-theme-primary: magenta;
}
- entity: input_number.test_number_2
name: method 2
card_mod:
style:
ha-textfield $: |
.mdc-line-ripple::before {
border-bottom-color: red !important;
}
.mdc-line-ripple::after {
border-bottom-color: magenta !important;
}
- entity: input_number.test_number_2
name: no underline
card_mod:
style:
ha-textfield $: |
.mdc-line-ripple::before,
.mdc-line-ripple::after {
border-bottom-style: none !important;
}
- entity: input_number.test_number_2
name: default
Changing a padding around an input field:
Two methods are available:
â using a CSS variable;
â using a CSS property with a detailed DOM navigation.
![image](https://community-assets.home-assistant.io/original/4X/d/9/b/d9bfa3006399d5b94ebce1f8edcefc8d46767c85.png)
code
- type: entities
title: padding
entities:
- entity: input_number.test_number_2
name: left & right padding = 0
card_mod:
style: |
:host {
--text-field-padding: 0px;
}
- entity: input_number.test_number_2
name: right padding = 0
card_mod:
style:
ha-textfield $: |
label {
padding-right: 0px !important;
}
- entity: input_number.test_number_2
name: default
Changing a width of the input field:
Two methods are available:
â using a CSS variable;
â using a CSS property with a detailed DOM navigation.
![image](https://community-assets.home-assistant.io/original/4X/7/4/f/74f48b86eda0bd58e66e5aab6d6cbb4ae9b4ed43.png)
code
- type: entities
title: field width
entities:
- entity: input_number.test_number_2
name: custom (method 1)
card_mod:
style: |
:host {
--ha-textfield-input-width: 160px;
}
- entity: input_number.test_number_2
name: custom (method 2)
card_mod:
style:
ha-textfield $: |
input {
width: 120px !important;
}
- entity: input_number.test_number_2
name: default
Changing a padding around the UoM label:
![image](https://community-assets.home-assistant.io/original/4X/0/2/1/0218c98e653de1baf8d41c19ab6fa8aa6f8e2f1a.png)
code
- type: entities
title: padding for UoM
entities:
- entity: input_number.test_value_uom
name: custom padding
card_mod:
style: |
:host {
--text-field-suffix-padding-left: 0px;
--text-field-suffix-padding-right: 12px;
}
- entity: input_number.test_value_uom
name: default
Wrapping a long name:
![image](https://community-assets.home-assistant.io/original/4X/f/7/c/f7cd41ad2482f5e7f87efac75549796fc804e545.png)
code
- type: entities
title: Wrapping a text for the name
entities:
- entity: input_number.test_number_2
name: long long long long long long long
secondary_info: last-changed
card_mod: &ref_card_mod_wrapping_text
style:
hui-generic-entity-row $: |
.info {
text-overflow: unset !important;
white-space: unset !important;
}
- entity: input_number.test_number_2
name: long long long long long long long
card_mod: *ref_card_mod_wrapping_text
- entity: input_number.test_number_2
secondary_info: last-changed
name: long long long long long long long
- entity: input_number.test_number_2
name: long long long long long long long
Hidden name:
Two methods are available:
â use a âblankâ name;
â hide the name.
![image](https://community-assets.home-assistant.io/original/4X/5/3/b/53b12ca911c8c8e66815875e1b2ec3ce944637ed.png)
code
- type: entities
title: Hidden name
entities:
- entity: input_number.test_number_2
name: ' '
- entity: input_number.test_number_2
card_mod:
style:
hui-generic-entity-row $: |
.info {
display: none;
}
- entity: input_number.test_number_2
name: default
Changed rowâs height:
![image](https://community-assets.home-assistant.io/original/4X/3/e/f/3efd65eb89359582d1def3c7cd77a3f29157bb7d.png)
code
type: entities
entities:
- entity: input_number.test_number_2
name: custom height
card_mod:
style:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
- entity: input_number.test_number_2
name: default
How to disable an input_number
row:
Two methods are available:
â the row is displayed as disabled;
â the row only has a read-only input field.
![image](https://community-assets.home-assistant.io/original/4X/1/6/8/168bc0815c97a0f15a9fc18f75692608133cfbdc.png)
code
- type: entities
title: Locked input_number
entities:
- entity: input_boolean.test_boolean
name: Lock input_number
- entity: input_number.test_number_2
name: disabled
tap_action:
action: none
card_mod:
style: |
:host {
{% if is_state('input_boolean.test_boolean','on') %}
--mdc-text-field-ink-color: var(--disabled-text-color);
color: var(--disabled-text-color);
--mdc-text-field-idle-line-color: var(--disabled-text-color);
--paper-item-icon-color: var(--disabled-text-color);
pointer-events: none;
{% endif %}
}
- entity: input_number.test_number_2
name: read-only
tap_action:
action: none
card_mod:
style: |
:host {
{% if is_state('input_boolean.test_boolean','on') %}
pointer-events: none;
{% endif %}
}
- type: section
label: with UoM
- entity: input_number.test_value_uom
name: custom padding
name: disabled
tap_action:
action: none
card_mod:
style: |
:host {
{% if is_state('input_boolean.test_boolean','on') %}
--mdc-text-field-ink-color: var(--disabled-text-color);
color: var(--disabled-text-color);
--mdc-text-field-idle-line-color: var(--disabled-text-color);
--paper-item-icon-color: var(--disabled-text-color);
--secondary-text-color: var(--disabled-text-color);
pointer-events: none;
{% endif %}
}
Short list of CSS variables available for âtextfieldâ control:
Old styles - not valid since HA 2022.3
Colored value:
Styling is done like for "input-text"
entity row - check this description.
![image](https://community-assets.home-assistant.io/original/3X/5/1/518abf50181b417c0d307bc2952a6c69bb5f9595.png)
Colored background:
Styling is done like for "input-text"
entity row - check this description.
![image](https://community-assets.home-assistant.io/original/3X/e/b/ebdb7057c5988d8540241a2bf144118d74b9b074.png)
Aligned value:
Styling is done like for "input-text"
entity row - check this description.
![image](https://community-assets.home-assistant.io/original/3X/e/0/e0c128f692082e5a0ed88f34dd447d6fe5f874fb.png)
Changing a width of the input field:
Styling is done like for "input-text"
entity row - check this description.
![image](https://community-assets.home-assistant.io/original/3X/e/4/e489ef550c907fde2b2e68cfcb5638ee6e397fc8.png)
Colored underline:
Styling is done like for "input-text"
entity row - check this description.
![image](https://community-assets.home-assistant.io/original/3X/b/0/b04d526c35688f8ef10ce498c6bd1b9f6aea8250.png)
![image](https://community-assets.home-assistant.io/original/3X/2/0/20bda983ccba72dda9ecca55d1d8e6a2748f8f7e.png)
Disabled control:
type: entities
title: Locked input_number
entities:
- entity: input_boolean.test_boolean
name: Lock input_number
- entity: input_number.test_number_2
tap_action:
action: none
card_mod:
style: |
:host {
{% if is_state('input_boolean.test_boolean','on') %}
--paper-item-icon-color: var(--disabled-text-color);
--paper-input-container-color: var(--disabled-text-color);
--paper-input-container-input-color: var(--disabled-text-color);
color: var(--disabled-text-color);
pointer-events: none;
{% endif %}
}
![image](https://community-assets.home-assistant.io/original/4X/f/5/9/f59aa1ffe9867358edde1bdaf9978205ac377144.png)
Also, you may remove color
options to make the row clearly visible but âread-onlyâ.
More examples are described here.