Card-Mod on a mushroom-select card

Configuration Frontend
1

Hi There,

I am trying to change the select text color in a mushroom select card.
Not sure at what position to add the card-mod. I have tried various positions, but the color does not change… any clue?

type: custom:button-card
name: Lademodus
icon: mdi:battery-charging-40
entity: select.openwb_lademodus
show_state: true
custom_fields:
  btn:
    card:
      type: custom:mushroom-select-card
      entity: select.openwb_lademodus
      fill_container: false
      primary_info: none
      secondary_info: none
      icon_type: none
styles:
  grid:
    - grid-template-areas: '"n btn"  "s btn"  "i btn"'
    - grid-template-columns: 1fr min-content
    - grid-template-rows: min-content min-content 1fr
  card:
    - padding: 22px
  custom_fields:
    btn:
      - justify-content: end
  img_cell:
    - justify-content: start
    - position: absolute
    - width: 100px
    - height: 100px
    - left: 0
    - bottom: 0
    - margin: 0 0 -30px -30px
    - background-color: '#663e00'
    - border-radius: 500px
  icon:
    - width: 60px
    - color: '#ffddb9'
    - opacity: '0.6'
  name:
    - justify-self: start
    - allign-self: start
    - font-size: 18px
    - font-weight: 500
    - color: '#f8bb71'
  state:
    - min-height: 80px
    - justify-self: start
    - allign-self: start
    - font-size: 14px
    - opacity: '0.7'
    - color: '#dfc1a2'

image
image926×380 10.4 KB

1 Like
2 
type: custom:button-card
name: Lademodus
icon: mdi:battery-charging-40
entity: select.garden_event_select
show_state: true
custom_fields:
  btn:
    card:
      type: custom:mushroom-select-card
      card_mod:
        style:
          mushroom-select-option-control$:
            mushroom-select$: |
             .mdc-select__selected-text {
             color: orange !important;
             }
      entity: select.garden_event_select
      fill_container: false
      primary_info: none
      secondary_info: none
      icon_type: none
styles:
  grid:
    - grid-template-areas: '"n btn"  "s btn"  "i btn"'
    - grid-template-columns: 1fr min-content
    - grid-template-rows: min-content min-content 1fr
  card:
    - padding: 22px
  custom_fields:
    btn:
      - justify-content: end
  img_cell:
    - justify-content: start
    - position: absolute
    - width: 100px
    - height: 100px
    - left: 0
    - bottom: 0
    - margin: 0 0 -30px -30px
    - background-color: '#663e00'
    - border-radius: 500px
  icon:
    - width: 60px
    - color: '#ffddb9'
    - opacity: '0.6'
  name:
    - justify-self: start
    - allign-self: start
    - font-size: 18px
    - font-weight: 500
    - color: '#f8bb71'
  state:
    - min-height: 80px
    - justify-self: start
    - allign-self: start
    - font-size: 14px
    - opacity: '0.7'
    - color: '#dfc1a2'
3

Great - thanks.

One more thing. If I want to add another styling like:

card_mod:
  style:
    mushroom-select-option-control$:
      mushroom-select$: |
        mwc-menu {
          --mdc-theme-text-primary-on-background: red;
          --mdc-theme-primary: green;
          --mdc-theme-surface: lightyellow;
        }

How could I do this?

4 
type: custom:button-card
name: Lademodus
icon: mdi:battery-charging-40
entity: select.garden_event_select
show_state: true
custom_fields:
  btn:
    card:
      type: custom:mushroom-select-card
      card_mod:
        style:
          mushroom-select-option-control$:
            mushroom-select$: |
             .mdc-select__selected-text {
             color: orange !important;
             }
             mwc-menu {
              --mdc-theme-text-primary-on-background: red;
              --mdc-theme-primary: green;
              --mdc-theme-surface: lightyellow;
             }
      entity: select.garden_event_select
      fill_container: false
      primary_info: none
      secondary_info: none
      icon_type: none
styles:
  grid:
    - grid-template-areas: '"n btn"  "s btn"  "i btn"'
    - grid-template-columns: 1fr min-content
    - grid-template-rows: min-content min-content 1fr
  card:
    - padding: 22px
  custom_fields:
    btn:
      - justify-content: end
  img_cell:
    - justify-content: start
    - position: absolute
    - width: 100px
    - height: 100px
    - left: 0
    - bottom: 0
    - margin: 0 0 -30px -30px
    - background-color: '#663e00'
    - border-radius: 500px
  icon:
    - width: 60px
    - color: '#ffddb9'
    - opacity: '0.6'
  name:
    - justify-self: start
    - allign-self: start
    - font-size: 18px
    - font-weight: 500
    - color: '#f8bb71'
  state:
    - min-height: 80px
    - justify-self: start
    - allign-self: start
    - font-size: 14px
    - opacity: '0.7'
    - color: '#dfc1a2'
5

:grinning:

Thanks a lot!!