Material design 3 adjustments

Feature Requests
1

Hi,

I love the new Material 3, but there are two things that perhaps you could change:

  1. The green background in the drop down in Material Light color scheme
  2. Placeholder should probably look more like placeholders (?)

See them demonstrated in this fresh material 3 app:

Of course, I could adjust this myself, but I would prefer that the standard design was updated.

Cheers,
Stein

3 Likes
2

Ok, so I finally changed this myself in my own CSS.

I share my changes below for reference for others who may want to change their css.

Disclaimer: I have not tested against other colormaps than Material Light, and I don’t know if it is the right use of the theme colors. I just picked those that were closest to what I wanted.

/* ------ For the dropdown background ----------*/
.anvil-dropdown select option {
  /* background-color: green; */
  background-color: %color:Surface Variant%;
}

/* ----- For the placeholder color ------------ */
input.anvil-component::-webkit-input-placeholder, textarea.anvil-component::-webkit-input-placeholder {
  /*color: %color:On Surface%;*/
  color: %color:Outline%;
}
input.anvil-component::-moz-placeholder, textarea.anvil-component::-moz-placeholder {
  color: %color:Outline%;
}
input.anvil-component::placeholder, textarea.anvil-component::placeholder  {
  color: %color:Outline%;
}

.app-bar input.anvil-component::-webkit-input-placeholder, .app-bar textarea.anvil-component::-webkit-input-placeholder {
  color: %color:Outline%;
}
.app-bar input.anvil-component::-moz-placeholder, .app-bar textarea.anvil-component::-moz-placeholder {
  color: %color:Outline%;
}
.app-bar input.anvil-component::placeholder, .app-bar textarea.anvil-component::placeholder  {
  color: %color:Outline%;
}
2 Likes