0

My question is: How to change the custom color of [part="toggle-button"] in the vaadin-select?

I've searched how to change it but I cannot get it too. Please help and solve it, thank you!

cfrick
  • 35,203
  • 6
  • 56
  • 68
Lun Leong
  • 61
  • 7
  • Welcome to Stack Overflow! You seem to be asking for someone to write some code for you. Stack Overflow is a question and answer site, not a code-writing service. Please read about [How to Ask a Question](https://stackoverflow.com/help/how-to-ask) and [How to create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) to learn how to write effective questions. I recommend you to add some piece of code. Then we can try to fix it or give you an advice. – Teocci Jun 13 '19 at 06:25
  • @Teocci not all questions benefit from including code, this one is complete enough. – Javier Jun 13 '19 at 14:48
  • @Javier I am not so sure here. See the comment to my answer. From this point on it really needs some "i tried this, but it does not work" – cfrick Jun 13 '19 at 15:04
  • @Javier, before to add my comments I always search the question to find duplicates, and I found many ways to solve this. Also the user just ask **How can I do ... ** we don't know what he tried? what are the variables? It looks like he is using SO as a code writing service. – Teocci Jun 13 '19 at 23:24

1 Answers1

0

Just facing with this problem. After some investigations in inspect mode in browser, I found this solution which works for me:

CssImport(value = "./views/your.css", themeFor = "vaadin-checkbox")
class YourViewClass  extends Div {

}

And in your.css file add this:

:host(.toggle-button[checked]) [part='checkbox'] {
    background-color: your-color-code-here;
}
Iosif Mocanu
  • 53
  • 4