Inputs aren’t cards, they’re rows, so they don’t have a ha-card.
Card-mod can apply styles to them though, but only if they are in an entities card:
type: entities
entities:
- entity: input_select.home_mode
style: |
state-badge{
display: none;
}
Outside of an entities card it depends on how you use it, but with mod-card it should be possible.
Your example was exactly what i was using and didn’t worked on my system but your screenshot lead me look elsewhere and i quickly found the source of my issue:
I was using an obsolete version of card-mod not managed by Hacs(Arff)… after updated it that works far better now !!
Many thanks @thomasloven !
I am getting a lot of errors in my console many of which refer at the top level to card-mod.
Would you mind taking a look and telling me if you think they do relate to this card, if they are anything to worry about and if you have a suggestion to avoid them?
Thanks.
I believe you’re using fold-entity-row with style: set for either a header or some items. Could you please show me your configuration for that?
Indeed I am:
#=== Schedule 2
- type: custom:fold-entity-row
head:
type: custom:restriction-card
row: true
card:
entity: input_boolean.guest_mode_schedule_2
style: |
:host {
--restriction-regular-lock-color: red;
}
entities:
- input_text.guest_mode_schedule_2_name
- input_select.guest_mode_schedule_2_day
- input_datetime.guest_mode_schedule_2_start_time
- input_number.guest_mode_schedule_2_duration
Please tell me, what am I doing wrong?
I needed to place (on a common card) horizontally 3 pictures of different sizes, 60% 20% 20% wide.
The code below results in a 100% CPU-load and inability to load HA-interface. Code that uses only “%%” does not work:
- type: custom:mod-card
style: |
ha-card { background: white; }
card:
type: custom:layout-card
layout: horizontal
min_columns: 3
column_width: [60%, 20%, 20%]
cards:
- type: picture
image: /local/pic-1.png
style: |
ha-card { background-color: red; }
- type: picture
image: /local/pic-2.png
style: |
ha-card { background-color: green; }
- type: picture
image: /local/pic-3.png
style: |
ha-card { background-color: blue; }
And all the same, I achieved the correct result - everything began to work perfectly, as I need - I had to add an extra column of 1px, but I understand that this is not the correct code:
- type: custom:mod-card
style: |
ha-card { background: white; }
card:
type: custom:layout-card
layout: horizontal
min_columns: 4
column_width: [59%, 20%, 20%, 1px]
cards:
- type: picture
image: /local/pic-1.png
style: |
ha-card { background-color: red; }
- type: picture
image: /local/pic-2.png
style: |
ha-card { background-color: green; }
- type: picture
image: /local/pic-3.png
style: |
ha-card { background-color: blue; }
Is it possible to make a badge (or the badge icon) and a entity icon in a card to blink?
If so please, share the code.
Can I set an icon color template for a whole card based on a specific attribute? I’m trying, but I’m unsuccessful in combining the various examples, here’s my failed attempt:
style: |
:ha-card {
--paper-item-icon-color:
{% if state_attr(config.entity,'1 Dag') < 0 %}
#ff0000
{% else %}
#00cc00
{% endif %}
;
}
entities:
- entity: sensor.dnb_health_care_n
secondary_info: '[[ {entity}.attributes.Dato ]], [[ {entity}.attributes.1 Dag ]]%'
type: 'custom:secondaryinfo-entity-row'
- entity: sensor.dnb_norge_indeks_a
secondary_info: '[[ {entity}.attributes.Dato ]], [[ {entity}.attributes.1 Dag ]]%'
type: 'custom:secondaryinfo-entity-row'
- entity: sensor.dnb_teknologi_n
secondary_info: '[[ {entity}.attributes.Dato ]], [[ {entity}.attributes.1 Dag ]]%'
type: 'custom:secondaryinfo-entity-row'
show_header_toggle: false
title: Fond
type: entities
If possible, I would also like to apply the color to the state and/or the percent part of the secondary info line.
Maybe something like this?
style: |
@keyframes blinker { 50% { opacity: 0; } }
ha-card { animation: blinker 1s linear infinite; }
Tried your code, and the code in the documentation, without luck.
Maybe post what you have for your card and someone here may have an idea how to get it working for you 
I have the Meteorology Alarm integration with the binary sensor. The sensor is displayed when “on”. Since it is an alarm I want to draw attention to it by making it blink. The badge or the icon in the badge.
Is it possible making it blink?
title: Home
views:
- badges:
- entity: binary_sensor.meteoalarm_akershus
style: |
:host {
--label-badge-background-color: red;
display:
{% if is_state('binary_sensor.meteoalarm_akershus', 'off') %}
none;
{% endif %}
}
Maybe this will work:
title: Home
views:
- badges:
- entity: binary_sensor.meteoalarm_akershus
style: |
@keyframes blinker { 50% { opacity: 0; } }
:host {
--label-badge-background-color: red;
animation: blinker 1s linear infinite;
display:
{% if is_state('binary_sensor.meteoalarm_akershus', 'off') %}
none;
{% endif %}
}
Brilliant! 
I assume it worked then? 
Oh Yeah.
Wondering if anyone can lend me a hand here. I am trying to change the background color of the footer area in a picture glance card. Its the simi-transparent black area at the bottom of the card where entity icons sit. I just can’t quite seem to get the call correct to change that area. Thanks!
I noticed bunch of errors after recent HA upgrade to 0.106.x
I didn’t notice any recent updates for this card from HACS. Am I missing anything here?
- type: 'custom:mod-card'
<<: *card_style_anchor
card:
type: custom:weather-card
entity: weather.dark_sky
# current: true
details: true
forecast: true
card_style: &card_style_anchor
style:
.: |
ha-card {
border-radius: 20px;
overflow: hidden;
width: 89%;
margin: 0 auto;
padding-top: 0px;
}
create-element-base.ts:64 mod-card TypeError: Cannot assign to read only property '.' of object '#<Object>'
at HTMLElement.setConfig (card-mod.js:1)
at o (create-element-base.ts:61)
at a (create-element-base.ts:80)
at l (create-element-base.ts:131)
at Module.Hi (create-card-element.ts:88)
at layout-card.js:1
at HTMLElement.build_card (layout-card.js:1)
at layout-card.js:1
at Array.map (<anonymous>)
at HTMLElement.build_cards (layout-card.js:1)
I’ve got a similar issue since updating, i just copy-pasted the example from git and changed it to my intities.
Any clue what i’m doing wrong?
Cannot assign to read only property 'style' of object '#<Object>'
type: 'custom:mod-card'
style: |
ha-card {
border: 1px solid green;
}
card:
type: vertical-stack
cards:
- type: light
entity: light.kookplaat
- type: light
entity: light.woonkamer
Any idea if this would work with entity filter? I have cards show up if a door is unlocked or window open - I want to be able to have the background as red, so it sticks out in my dashboard - but not working for me:
- type: entity-filter
title: "** ATTENTION NEEDED **"
show_header_toggle: true
style: |
ha-card {
background: red
}
entities:
- binary_sensor.water_leak_sensor_158d000211b48a
- binary_sensor.water_leak_sensor_158d0002138f70
- binary_sensor.water_leak_sensor_158d000211a475
- binary_sensor.water_leak_sensor_158d000214f511
- binary_sensor.door_window_sensor_158d0001e74863
- binary_sensor.door_window_sensor_158d000202774f
- binary_sensor.door_window_sensor_158d0001f3e313
- binary_sensor.door_window_sensor_158d0002045f73
- binary_sensor.door_window_sensor_158d0001e7c2b1
- binary_sensor.door_window_sensor_158d000208e1cf
- binary_sensor.wyzesense_777ed17d
- binary_sensor.wyzesense_778089f4
- binary_sensor.wyzesense_778b2932
- binary_sensor.wyzesense_778c7f1b
- binary_sensor.wyzesense_778c8fb8
- binary_sensor.wyzesense_77809b2a
- binary_sensor.wyzesense_777ed17d
- cover.garage_door
- lock.kwikset_spectrum_brands_touchpad_electronic_deadbolt_locked
state_filter:
- 'on'
- 'open'
- 'unlocked'
show_empty: false