vaadin-combo-box/vaadin-combo-box-overlay更改背景颜色/ Polymer API

我试图覆盖vaadin-combo-box-overlay元素中存在的背景颜色。vaadin-combo-box/vaadin-combo-box-overlay更改背景颜色/ Polymer API

这里是（https://github.com/vaadin/vaadin-combo-box/blob/master/vaadin-combo-box-overlay.html）

采取我要重写的CSS，更具体的background属性，源

:host { 
     position: absolute; 
     @apply(--shadow-elevation-2dp); 
     background: #fff; 
     border-radius: 0 0 2px 2px; 
     top: 0; 
     left: 0; 
    ....... 
    }

所以我想是这样：

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

而且我已经尝试过:host，但我想它应该使用:root，因为我在对话框中使用此下拉菜单，并且叠加组件似乎不是该对话框的子项。我已经尝试了上面提到的组合，但没有取得任何成功。

而且我不知道为什么背景不作为参数的文本颜色为：

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

指定为--primary-text-color不同的值，我能够改变文字颜色..

谢谢。

来源

2016-09-20 darku

谢谢帕特里克！

我没有想过这样做。

这是我做的，尽管一个hacky的解决方案。

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

我只能访问重叠时，组合体被扩大，所以在值变化监听的组合将扩大。

来源

2016-09-23 09:04:16 darku

你可以用JavaScript来做到这一点。

ready: function() { 
     var domElem=Polymer.dom(this).node.$.YOUR-VAADIN-ELEMENT-ID.$.overlay.style.backgroundColor="red"; 
    }

ready: function() { 
      var css = '#selector .item { background-color:red; }'; 
      var style = document.createElement('style'); 
       style.type = 'text/css'; 
       style.appendChild(document.createTextNode(css)); 
      Polymer.dom(this).node.$.tourSelector.$.overlay.$.selector.appendChild(style); 
     }

想有一个工作的CSS选择器，但我不能设置断点在CSS中找出正确的选择！

来源

2016-09-22 15:59:12

vaadin-combo-box/vaadin-combo-box-overlay更改背景颜色/ Polymer API

回答

相关问题