2016-10-20 15 views
0

Я пытаюсь изменить размер шрифта того, что выбрано в paper-dropdown-menu, но все, что я пробовал, терпит неудачу. Я пробовал:размер выпадающего меню из выпадающего меню

--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;}; 

Everytime, это правило было положить в :root селектор , но ни один из них не работает ...

вот мой код:

<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> 
+0

': root' работает, если вы используете HTML-файл. Если вы ставите его в пользовательский элемент, то это ': host' – a1626

ответ

1

Вам нужно положить он в теге 'style is = "custom-style" и нацеливает тэг на класс или идентификатор, если у вас нет только одного раскрывающегося меню или вы хотите, чтобы все они имели одинаковый шрифт, размер шрифта и т. д.

Добавьте ниже код стиля, чтобы настроить шрифт на 20 пикселей. Обратите внимание на то, что класс нацелен на элемент, который я хочу создать, класс в моем примере - «тест». Если вы не хотите использовать класс, просто настройте цели на все элементы выпадающего меню, изменив значение .test в раскрывающемся меню.

Если вы хотите отделить свой собственный стиль от собственного файла, я считаю, что он должен быть 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> 
Смежные вопросы