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

回答

相關問題