Question

我正在使用Polymer 1.0，在从纸张下拉菜单中选择一个选项后，所选项目在Times New Roman字体中显示为蓝色。

    paper-dropdown-menu.custom {

      --paper-dropdown-menu-icon: {

        display:none;

      }

      --paper-input-container-label: {
        font-size:12px;
        text-align: right;
        font-weight: bold;
      };
      --paper-input-container-input: {
        color: var(--paper-indigo-500);
        font-style: normal;
        text-align: right;
        font-family: serif;
        text-transform: uppercase;
      }
      /* no underline */
      --paper-input-container-underline: {
        display: none;
      };
   }



  </style>



  <paper-dropdown-menu 
        id="userOptionDropDown"
        label='&#9660;&nbsp;$user_check' 
        class="custom"
        style="text-align:right;
        width:250px;
        display:inline-block;
        float:right;
        position:relative;
        top:-7px;" 
        noink no-animations>

        <paper-menu id="userOptionMenu" class="dropdown-content">

            <paper-item onclick="location.href = '$profileHREF';">Profile</paper-item>
            <paper-item onclick="location.href = 'logout.php';">Logout</paper-item>

        </paper-menu>

    </paper-dropdown-menu>

我需要添加哪些自定义CSS来设置所选项目字体的样式？

Answer 1

您已经使用正确的CSS mixin（--paper-input-container-input）来设置下拉菜单输入的字体样式。该文字显示为Times New Roman，因为您的mixin有font-family: serif;。您可以将serif更改为例如Roboto：

＆＃13;

HTMLImports.whenReady(() => {
  Polymer({
    is: 'x-foo'
  });
});

＆＃13;

<head>
  <base href="https://polygit.org/polymer+1.7.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-dropdown-menu/paper-dropdown-menu.html">
  <link rel="import" href="paper-menu/paper-menu.html">
  <link rel="import" href="paper-item/paper-item.html">
</head>

<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <style>
        paper-dropdown-menu.custom {
          --paper-dropdown-menu-icon: {
            display:none;
          }

          --paper-input-container-label: {
            font-size:12px;
            text-align: right;
            font-weight: bold;
          };
          --paper-input-container-input: {
            color: var(--paper-indigo-500);
            font-style: normal;
            text-align: right;
            font-family: Roboto;
            text-transform: uppercase;
          }
          /* no underline */
          --paper-input-container-underline: {
            display: none;
          };
        }
      </style>

      <paper-dropdown-menu 
                           id="userOptionDropDown"
                           label='&#9660;&nbsp;$user_check' 
                           class="custom"
                           style="text-align:right;
                                  width:250px;
                                  display:inline-block;
                                  float:right;
                                  position:relative;
                                  top:-7px;" 
                           noink no-animations>

        <paper-menu id="userOptionMenu" class="dropdown-content">
          <paper-item>Profile</paper-item>
          <paper-item>Logout</paper-item>
        </paper-menu>
      </paper-dropdown-menu>
    </template>
  </dom-module>
</body>

＆＃13;

codepen

纸张下拉菜单选择文本样式

1 个答案: