javascript - 在类型为date的纸张输入中使用时，在Polymer中设置日期选择器的样式

在我的Polymer项目中，我试图建立一个高级搜索，让用户选择一个日期。我创建了带有日期类型的纸张输入。
显然，日期选择器没有使用材质设计，但是当我尝试设置样式时，没有任何反应。
我正在使用WebKit提供的这8个伪元素来自定义日期输入的文本框。 8 pseudo-elements
以下是我尝试列出的两种方法。我可能做错了什么，还是Polymer不支持Webkit？

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/webcomponentsjs/webcomponents-lite.min.js">
<link rel="import" href="../../bower_components/paper-input/paper-input.html">

<dom-module id="my-datepicker">
  <template>

    <style>
      :host {
        display: block;
      }
      paper-input ::content input::-webkit-datetime-edit-month-field{
        color: blue;
      }
      paper-input ::content input::-webkit-inner-spin-button {
        display: none;
      }
    </style>
    <style>
      paper-input ::content input::-webkit-datetime-edit-month-field{
        color: blue;
      }
      paper-input ::content input::-webkit-inner-spin-button {
        display: none;
      }
    </style>

    <!-- Paper Input with date Picker -->
    <paper-input label="Search a Date of Birth" type="date" always-Float-Label></paper-input>

  </template>
  <script>

    Polymer({

      is: 'my-datepicker',
      properties: {

      },

   });

  </script>
</dom-module>

最佳答案

有一种样式设置日期输入的方法，但是您必须访问<paper-input>的本地DOM，即分布式内容。使用::content伪元素非常简单（请参阅文档中的Styling local DOM指南）。

<style>
  paper-input ::content input::-webkit-datetime-edit-month-field{
    color: blue;
  }
  paper-input ::content input::-webkit-inner-spin-button {
    display: none;
  }
</style>

据我所知，这是一个Shady-DOM问题，在将来的Polymer版本中可能会有所更改。

编辑：
这是working JSBin，其中月份以蓝色显示，内部的旋转按钮被隐藏。

关于javascript - 在类型为date的纸张输入中使用时，在Polymer中设置日期选择器的样式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39688177/