Css 如何设置聚合物下拉菜单箭头的样式

对于Polymer来说是个新概念，文档中的例子似乎有点“浅显”。我正在尝试设计一个下拉菜单，这样所有的东西在蓝色背景上都是白色的。大多数东西（标签、烤面包片等）都在工作，但下拉菜单顽固地拒绝显示除暗灰色以外的任何颜色的小“箭头”按钮

样式代码为：

<style>
  :host {
    display: block;

    /* Main vars */
    --ki-teal: #4790A8;
    --paper-tabs-selection-bar-color: #fff;
    --paper-tab-ink: #fff;

    /* Toolbar colours */
    paper-toolbar.ki {
      --paper-toolbar-background: var(--ki-teal);
    }

    /* Project select dropmenu colours */
    paper-dropdown-menu-light.ki {
      --paper-dropdown-menu-color: #fff;
      --paper-dropdown-menu-focus-color: #fff;
      --paper-dropdown-menu-button: {
        color: #fff;
      }
      --paper-input-container-color: var(--ki-teal);
      --paper-input-container-focus-color: #fff;
      --paper-dropdown-menu-input: {
        border-bottom: none;
      };
    }

    /* Notifications */
    #toastSave {
      --paper-toast-background-color: var(--ki-teal);
      --paper-toast-color: white;
    }

  }
</style>

：主持人{
显示：块；
/*主要变量*/
--基特尔：4790A8；
--纸张选项卡选择栏颜色：#fff；
--纸张标签墨水：#fff；
/*工具栏颜色*/
paper-toolbar.ki{
--纸张工具栏背景：var（--kiteal）；
}
/*项目选择下拉菜单颜色*/
paper-dropdown-menu-light.ki{
--纸张下拉菜单颜色：#fff；
--纸张下拉菜单焦点颜色：#fff；
--纸张下拉菜单按钮：{
颜色：#fff；
}
--纸张输入容器颜色：var（--ki teal）；
--纸张输入容器焦点颜色：#fff；
--纸张下拉菜单输入：{
边框底部：无；
};
}
/*通知*/
#节约{
--纸烤面包背景颜色：var（--ki teal）；
--烤面包纸颜色：白色；
}
}

但是，

——纸张下拉菜单按钮

似乎没有任何效果，或者我没有正确使用它。感谢您的指导

此外，您将看到（至少在Chrome/Windows上），当下拉菜单具有焦点时，下划线栏未与活动选项卡栏正确对齐。我想这只是聚合物CSS的一个小故障，最终会得到解决，除非我在

部分也需要注意它

如果您想要其他的

铁图标

您不想设置样式，那么在您的

纸张下拉菜单中使用
--iron icon fill color
，否则您可以在
主机
中设置样式并使用它

另一种方法是给mixin
——纸张下拉菜单图标赋予颜色。根据
纸张下拉菜单
它是

应用于内部图标的mixin

最后，如果您查看
纸张下拉菜单指示灯
，您会注意到图标的默认值为
--禁用的文本颜色
。所以，如果你改变了这个值，这应该对你有帮助。我建议不要使用此方法，因为这是材质设计主题的默认变量，Polymer在很多地方都将其用作默认值。因此，除非你知道你在做什么，否则要避免这种方法

在聚合物中，如果一个元素在内部使用其他元素，则始终可以参考内部元素的样式指南并直接使用它。像这里一样，我们使用
铁图标
样式来设置
纸张下拉菜单中图标的样式

我不认为Polymer在其造型指南中直接提到了这一点，但您可以在
造型的末尾找到这一细节，并对其进行概括

您还可以使用任何纸张输入容器和纸张菜单按钮样式混合和自定义特性分别设置内部输入和菜单按钮的样式

非常感谢。为了获得额外的学分，我应该在哪里查阅文档？我按照纸张下拉菜单，它引用了纸张菜单按钮，但我并没有看到任何在那个里提到的铁图标。纸张下拉菜单提到--纸张下拉菜单按钮mixin，它应用于内部菜单按钮，但是如何呢？它能在不引用铁质图标的情况下实现同样的效果吗？是的-我尝试使用纸质菜单按钮mixin，但我无法对图标进行任何更改-只有你建议使用铁质图标有效。有没有更好的方式使用纸质菜单按钮？我在这个更新的JSBin中给出了我的最佳猜测，但它不起作用：我添加了另外两种方法来实现您想要的。不管怎样，我不认为改变<代码>--铁图标填充颜色有什么不对，我也不觉得其他方法比它更好或更差。