Javascript 在带有日期类型的纸张输入中使用时，在聚合物中设置日期选择器的样式

在我的Polymer项目中，我试图构建一个高级搜索，让用户选择一个日期。我创建了一个日期类型的纸张输入。 很明显，日期选择器没有使用材质设计，但是当我尝试设计样式时，什么也没有发生

我使用WebKit提供的这8个伪元素定制日期输入的文本框
下面是我尝试过的两种方法。我可能做错了什么，或者webkit在Polymer中不受支持

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

：主持人{
显示：块；
}
纸张输入：：内容输入：-webkit日期时间编辑月份字段{
颜色：蓝色；
}
纸张输入：：内容输入：-webkit内部旋转按钮{
显示：无；
}
纸张输入：：内容输入：-webkit日期时间编辑月份字段{
颜色：蓝色；
}
纸张输入：：内容输入：-webkit内部旋转按钮{
显示：无；
}
聚合物({
是‘我的约会挑肥拣瘦’，
特性：{
},
});

我想知道这是否是一个样式范围问题，因为我在尝试使用pikaday数据选择器时遇到了问题。当它向选择器添加一个'is hidden'类来隐藏它时，它并没有隐藏，css告诉它显示：none

---

其原因在《开发人员指南》中进行了解释，其中有一个函数“this.scopeSubtree（containerElement，true）”让它添加观察者，以查找dom更改并将其放入范围中。我不确定它是否能与这些“psuedo”元素一起工作，但您可以尝试一下。

我想知道这是否是一个样式范围问题，因为我在尝试使用pikaday数据选择器时遇到了问题。当它向选择器添加一个'is hidden'类来隐藏它时，它并没有隐藏，css告诉它显示：none

---

其原因在《开发人员指南》中进行了解释，其中有一个函数“this.scopeSubtree（containerElement，true）”让它添加观察者，以查找dom更改并将其放入范围中。我不确定它是否能与这些“psuedo”元素一起工作，但您可以尝试一下。

有一种方法可以设置日期输入的样式，但您必须访问

的本地DOM，即分布式内容。使用

：：content

伪元素非常简单（请参阅文档中的指南）

纸张输入：：内容输入：-webkit日期时间编辑月份字段{
颜色：蓝色；
}
纸张输入：：内容输入：-webkit内部旋转按钮{
显示：无；
}

据我所知，这是一个可疑的DOM问题，在未来的版本中可能会发生更改

编辑：

---

下面是一个示例，其中月份以蓝色显示，内部旋转按钮隐藏。

有一种方法可以设置日期输入的样式，但您必须访问

的本地DOM，即分布式内容。使用

：：content

伪元素非常简单（请参阅文档中的指南）

纸张输入：：内容输入：-webkit日期时间编辑月份字段{
颜色：蓝色；
}
纸张输入：：内容输入：-webkit内部旋转按钮{
显示：无；
}

据我所知，这是一个可疑的DOM问题，在未来的版本中可能会发生更改

编辑：

---

这是一个，月份以蓝色显示，内部旋转按钮隐藏。

社区已经创建了一个。也许你可以用它。谢谢@a1626我会看一看社区已经创建了一个。也许你可以用它。谢谢@a1626。我会根据文档进行查看，这是正确的方法。谢谢你！不幸的是，它不起作用。我试图用相同问题的id替换纸张输入。看起来造型没法穿了。很有意思。我在JSBin上添加了一个完整的示例，它似乎工作得很好（我在Chrome53.0/Mac上）。也许你可以添加更多的标签来确保没有其他错误。我编辑了上面的问题。。。除了我现有的代码外，我删除了纸张输入，并将其创建为自定义元素。我试图跟随你的JSBin，但由于某种原因，它就是不起作用。我也在使用Chrome，我以前的代码和当前的自定义元素显示了内部的旋转按钮。之后，我在Firefox和Safari中打开了我的文件，在这两种浏览器中都没有显示日期选择器。这很奇怪，因为根据W3school的说法，它至少应该在safariI中起作用。我看到您正在使用标记导入webcomponents-lite.min.js脚本（webcomponent polyfill）。这应该是一个标记，在添加任何标记之前，只能在根文件（不是每个组件）中执行。但我认为这不是真正的问题。那么，JSBin在您的机器上工作了吗？没错，谢谢您指出，不幸的是，这并没有造成错误，我确实已将其导入到我的主文件中。根据文档，这是正确的方法。谢谢你！不幸的是，它不起作用。我试图用相同问题的id替换纸张输入。看起来造型没法穿了。很有意思。我在JSBin上添加了一个完整的示例，它似乎工作得很好（我在Chrome53.0/Mac上）。也许你可以添加更多的标签来确保没有其他错误。我编辑了上面的问题。。。除了我现有的代码外，我删除了纸张输入，并将其创建为自定义元素。我试图跟随你的JSBin，但由于某种原因，它就是不起作用。我也在使用Chrome，我以前的代码和当前的自定义元素显示了内部的旋转按钮。之后，我在Firefox和Safari中打开了我的文件，在这两种浏览器中都没有显示日期选择器。这很奇怪，因为根据W3school的说法，它至少应该在safariI中起作用。我看到您正在使用标记导入webcomponents-lite.min.js脚本（webcomponents-lite.min.js）

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