How can I make a combo box widget display a specific color (e.g., red or gray) when it is empty or has no selection?
0
I'm looking for a way to visually indicate that the combo box is unselected. Any guidance on how to implement this would be greatly appreciated! i've included my current code below and a screenshot of how it currently looks. CSS - .darkmode { // General styles for the combobox .widget-combobox { color: black; &-down-arrow-icon { color: black; &-path { color: #ff00bf; } } &-down-arrow { color: black; fill: #009999; &-path { color: #ff00bf; } } &-selected-items { color:#5d5d5d; background-color: snow; } &-menu { background-color: snow; } &-item { color: #5d5d5d; background-color: snow; &:hover { background-color: #ced0d3; // Background color when an option is hovered color:#5d5d5d; } &.selected { background-color: #ffffff; // Background color for selected item } } &-input { background-color: indigo; // Default color when no text is shown color:#5d5d5d; &:placeholder-shown { background-color: indigo; } &:not(:placeholder-shown) { background-color: snow; color: red; } } &-input-container { background-color: indigo; // Default color when no text is shown color: #5d5d5d; &:placeholder-shown { background-color: indigo; } &:not(:placeholder-shown) { background-color: snow; color: #5d5d5d; } &-disabled { background-color: snow; color: black; } } &-placeholder-text { color: black; } } // Specific styles for icons .mx-icon-lined.mx-icon-chevron-down, .mx-icon-chevron-down, .widget-combobox-down-arrow-icon.mx-icon-lined.mx-icon-chevron-down { color: black; } }
asked
Jamie Martin
2 answers
0
Hi Jamie! You could use the Dynamic classes option in the widget's styling menu (under Common) to dynamically add one or more CSS classes to it based on an expression:
answered
Bart Zantingh
0
Are you sure your CSS is valid? I'm getting a lot of errors when I import your code in my code editor...
answered
Bart Zantingh