在具有日期类型的纸张输入中使用 Polymer 中的日期选择器样式答案

【问题标题】：Styling the date picker in Polymer when used inside a paper-input with type date在具有日期类型的纸张输入中使用 Polymer 中的日期选择器样式
【发布时间】：2017-02-02 22:21:51
【问题描述】：

在我的 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>

【问题讨论】：

社区已经创建了一个date-picker。也许你可以使用它。
谢谢@a1626 我去看看

标签： javascript css webkit polymer

【解决方案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，月份显示为蓝色，内部的旋转按钮被隐藏。

【讨论】：

根据文档，这是正确的方法。感谢那！不幸的是，它不起作用。我试图用 id 相同的问题替换纸张输入。好像造型过不去。
有趣。我在 JSBin 上添加了一个完整的示例，它似乎工作得很好（我在 Chrome 53.0 / Mac 上）。也许您可以添加更多的
我在上面编辑了我的问题...除了我现有的代码之外，我还删除了纸张输入并将其创建为自定义元素。我试图关注您的 JSBin，但由于某种原因它无法正常工作。我也在使用 Chrome 和我以前的代码以及当前的自定义元素，内部旋转按钮正在显示。之后，我在 Firefox 和 Safari 中打开了我的文件，在这两种浏览器中都没有显示日期选择器。这很奇怪，因为根据 W3school 的说法，它至少应该在 safari 中工作
我看到您正在使用标签来导入 webcomponents-lite.min.js 脚本（webcomponent polyfill）。这应该是一个
是的，感谢您指出，不幸的是，这并没有造成错误，我确实将它导入到我的主文件中

【解决方案2】：

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

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

【讨论】：