ペーパードロップダウンメニューのフォントサイズ

Question

paper-dropdown-menuで選択されているもののフォントサイズを変更しようとしていますが、試したすべてが失敗しています。私が試した：ルールが:rootセレクタ が、これらの作品のどれに入れ

--paper-input-container-label: {font-size: 8px;}; 
--paper-input-container-input: {font-size: 8px;}; 
--paper-input-container: {font-size: 8px;}; 
--paper-dropdown-menu: {font-size: 8px;}; 
--paper-dropdown-menu-input: {font-size: 8px;}; 
--paper-item: {font-size: 8px;}; 
--paper-item-selected: {font-size: 8px;}; 

毎回、...

をここに私のコードです：

<paper-dropdown-menu no-label-float class="rowsSelector"> 
    <paper-menu class="dropdown-content" selected="{{limit}}" attr-for-selected="value"> 
     <template is="dom-repeat" items="{{options}}"> 
     <paper-item value="{{item}}">{{item}}</paper-item> 
     </template> 
    </paper-menu> 
    </paper-dropdown-menu> 

Answer 1

あなたが配置する必要がありますドロップダウンメニューが1つしかないか、すべて同じフォント、フォントサイズなどを使用しない限り、スタイルは= "カスタムスタイル"のタグで、タグをクラスまたはIDでターゲティングします。

以下のスタイルコードを追加して、フォントを20ピクセルに調整します。スタイルを設定したい要素をターゲットにするクラスに注目してください。私の例のクラスは "test"です。クラスを使用したくない場合は、paper-dropdown-menuで.testを変更して、すべてのpaper-dropdown-menu要素を対象にしてください。

カスタムスタイルを独自のファイルに分割したい場合は、それが動作するにはHTMLファイルでなければならないと思います。

<style is="custom-style"> 
    .test { 

     --paper-input-container-label: { 
      font-size: 20px; 

     }; 
    } 
</style> 
<paper-dropdown-menu class="test" label="Dinosaurs"> 
    <paper-listbox class="dropdown-content"> 
     <paper-item>allosaurus</paper-item> 
     <paper-item>brontosaurus</paper-item> 
     <paper-item>carcharodontosaurus</paper-item> 
     <paper-item>diplodocus</paper-item> 
    </paper-listbox> 
</paper-dropdown-menu>