darku darku - 10 months ago 99
CSS Question

vaadin-combo-box / vaadin-combo-box-overlay change background color / Polymer API

I'm trying to override the background color present in


Here is the css that I want to override, more specifically the background property, source taken from (https://github.com/vaadin/vaadin-combo-box/blob/master/vaadin-combo-box-overlay.html)

:host {
position: absolute;
background: #fff;
border-radius: 0 0 2px 2px;
top: 0;
left: 0;

So I've tried something like:

:root ::content vaadin-combo-box-overlay.vaadin-combo-box-overlay {
background: red !important;
background-color: red !important;

Also I've tried with
but I guess it should be used
because I use this dropdown in a dialog, and the overlay component doesn't seem to be a child of the dialog. I've tried different combinatons as the one mentioned above without any success.

Also I'm wondering why the background is not parameterized as the text color is:

#selector .item {
cursor: pointer;
padding: 13px 16px;
color: var(--primary-text-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

Specifying a different value for
I'm able to change the text color..


Answer Source

Thanks Patrick !!

I wasn't thinking about to do try it this way.

Here's what I did, a hacky solution though.

ready : function(){
                var combo = this.$$('#comboid');
                combo.addEventListener('vaadin-dropdown-opened'', function() {
                    var overlay = Polymer.dom(this.root).querySelector('#overlay');
                    overlay.style.backgroundColor = primaryBackground;

I only have access to the overlay when the combo is expanded, so in the value change listener the combo would be expanded.