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

Question

在我的 Polymer 元素中，我正在尝试构建一个让用户选择日期的高级搜索。我创建了一个带有日期类型的纸张输入。 显然，日期选择器没有使用 Material 设计，但是当我尝试设置样式时，什么也没有发生。

我正在使用 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>

Answer 1

有一种方法可以设置日期输入的样式，但您必须访问 <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 ，其中月份以蓝色显示，内部微调按钮被隐藏。