용지 드롭 다운 메뉴 글꼴 크기

Question

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

매번이 규칙이 :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> 

Answer 1

당신은 둘 필요 하나의 드롭 다운 메뉴 만 있거나 동일한 글꼴, 글꼴 크기 등을 갖기를 원하지 않는 한 'style is = "custom-style"'태그를 사용하고 클래스 또는 ID로 태그를 지정하십시오.

아래 스타일 코드를 추가하여 글꼴을 20px로 조정하십시오. 스타일을 지정하려는 요소를 대상으로하는 클래스를 주목하십시오. 예제의 클래스는 "test"입니다. 수업을 사용하지 않으려면 종이 드롭 다운 메뉴로 .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>