在带有date类型的纸张输入中使用时，在Polymer中对日期选择器进行样式化

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

本文关键字：Polymer 日期 选择器 样式 类型 date 张输入 输入      更新时间：2023-09-26

在我的聚合物项目中，我试图构建一个高级搜索，让用户选择一个日期。我创建了一个带有日期类型的纸张输入。显然，日期选择器不使用材料设计，然而，当我试图样式它什么都没有发生。

我使用WebKit提供的这8个伪元素来定制日期输入的文本框。8个伪元素
下面是我尝试过的两种方法。我可能做错了什么，或者是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伪元素非常简单(请参阅文档中的样式化本地DOM指南)。

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

据我所知，这是一个阴凉dom问题，可能会在未来的聚合物版本中发生变化。

编辑:下面是一个工作的JSBin，其中月份以蓝色显示，并且隐藏了内部旋转按钮。

我想知道这是否是一个样式作用域问题，因为我在尝试使用pikaday数据选择器时遇到了问题。当它在选择器中添加' is-hidden'类来隐藏它时，它不会隐藏，css告诉它显示:none

这样做的原因在开发人员指南中有解释，并且有一个函数this. scopessubtree (containerElement,true)来让它添加寻找dom更改的观察者并将它们放入范围内。我不确定它是否能处理这些"psuedo"元素，但你可以试一试。

相关文章：