在带有日期类型的纸张输入中使用时，在 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

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

开发人员指南中解释了这样做的原因，并且有一个函数 `this.scopeSubtree(containerElement,true) 可以添加观察者以寻找 dom 更改并将它们放入范围内.我不确定它是否适用于这些 'psuedo' 元素，但您可以尝试一下。

Answer 2

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

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

Styling the date picker in Polymer when used inside a paper-input with type date

javascript

css

webkit

polymer