关于html：HTML5日期选择器是否有任何样式选项？


Are there any style options for the HTML5 Date picker?

我真的对HTML5日期选择器感到不满意。 令人耳目一新的是，W3C终于有了一些懈怠，因此我们不必继续重新发明这种常见的输入形式。

需要注意的是，我对选择器本身应用颜色的方式没有看到或预见到很多，这将在大多数站点上使用日期选择器作为一种破坏交易的方式。 输入可以使样式最小化。

  • 我不得不说，在W3C世界中进展非常缓慢。 浏览器开发人员/公司将更喜欢移至感兴趣的地方。 他们(浏览器)将不愿执行W3C中未明确指定的事情(并且编写这些文档需要时间)。 更多的人可以更快地实现目标。 因此，是的，如果您有兴趣，请加入他们的邮件列表并开始参与。

    • WebKit提供了以下八个伪元素，用于自定义日期输入的文本框：

    1
    2
    3
    4
    5
    6
    7
    8
    ::-webkit-datetime-edit
    ::-webkit-datetime-edit-fields-wrapper
    ::-webkit-datetime-edit-text
    ::-webkit-datetime-edit-month-field
    ::-webkit-datetime-edit-day-field
    ::-webkit-datetime-edit-year-field
    ::-webkit-inner-spin-button
    ::-webkit-calendar-picker-indicator

    因此，如果您认为日期输入可以使用更多的间距和可笑的配色方案，则可以添加以下内容：

    1
    2
    3
    4
    5
    6
    7
    8
    ::-webkit-datetime-edit { padding: 1em; }
    ::-webkit-datetime-edit-fields-wrapper { background: silver; }
    ::-webkit-datetime-edit-text { color: red; padding: 0 0.3em; }
    ::-webkit-datetime-edit-month-field { color: blue; }
    ::-webkit-datetime-edit-day-field { color: green; }
    ::-webkit-datetime-edit-year-field { color: purple; }
    ::-webkit-inner-spin-button { display: none; }
    ::-webkit-calendar-picker-indicator { background: orange; }
    1
    <input type="date">

    Screenshot

    相关讨论

    当前，尚无跨浏览器，无脚本方式设置本机日期选择器的样式。

    至于WHATWG / W3C内部发生了什么...
    如果确实出现此功能，则很可能是CSS-UI标准或某些与Shadow DOM相关的标准。 CSS4-UI Wiki页面列出了从CSS3-UI删除的一些外观相关的内容，但是老实说，似乎对CSS-UI模块没有太大兴趣。

    我认为目前对跨浏览器开发的最佳选择是使用基于JavaScript的界面实现漂亮的控件，然后禁用HTML5本机UI并替换它。我认为在将来，也许会有更好的本机控件样式，但更可能的是可以将本机控件替换为自己的Shadow DOM"小部件"的功能。

    令人讨厌的是，这是不可用的，因此寻求标准支持总是值得的。尽管看起来jQuery UI的领导者似乎已经尝试过并且没有成功。

    尽管这一切都令人沮丧，但也有必要考虑HTML5日期选择器的优点，以及为什么自定义样式很难并且可能应该避免的原因。在某些平台上，日期选择器看起来截然不同，我个人无法想到任何样式化本地日期选择器的通用方法。

    相关讨论

    在Zurb的github上找到了这个

    In case you want to do some more custom styling. Here's all the
    default CSS for webkit rendering of the date components.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    input[type="date"] {
         -webkit-align-items: center;
         display: -webkit-inline-flex;
         font-family: monospace;
         overflow: hidden;
         padding: 0;
         -webkit-padding-start: 1px;
    }

    input::-webkit-datetime-edit {
        -webkit-flex: 1;
        -webkit-user-modify: read-only !important;
        display: inline-block;
        min-width: 0;
        overflow: hidden;
    }

    input::-webkit-datetime-edit-fields-wrapper {
        -webkit-user-modify: read-only !important;
        display: inline-block;
        padding: 1px 0;
        white-space: pre;
    }
    相关讨论

    我结合使用了上述解决方案和一些试验和错误来得出此解决方案。花了我很烦的时间，希望以后能对其他人有所帮助。我还注意到Safari完全不支持日期选择器输入...

    我正在使用样式化组件来呈现透明的日期选择器输入，如下图所示：

    image of date picker input

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    const StyledInput = styled.input`
      appearance: none;
      box-sizing: border-box;
      border: 1px solid black;
      background: transparent;
      font-size: 1.5rem;
      padding: 8px;
      ::-webkit-datetime-edit-text { padding: 0 2rem; }
      ::-webkit-datetime-edit-month-field { text-transform: uppercase; }
      ::-webkit-datetime-edit-day-field { text-transform: uppercase; }
      ::-webkit-datetime-edit-year-field { text-transform: uppercase; }
      ::-webkit-inner-spin-button { display: none; }
      ::-webkit-calendar-picker-indicator { background: transparent;}
    `

    您可以使用以下CSS设置输入元素的样式。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    input[type="date"] {
      background-color: red;
      outline: none;
    }

    input[type="date"]::-webkit-clear-button {
      font-size: 18px;
      height: 30px;
      position: relative;
    }

    input[type="date"]::-webkit-inner-spin-button {
      height: 28px;
    }

    input[type="date"]::-webkit-calendar-picker-indicator {
      font-size: 15px;
    }
    1
    <input type="date" value="From" name="from" placeholder="From" required="" />

    相关讨论

    仅供参考，我需要使用color，fill等属性更新似乎无法实现的日历图标的颜色。

    最终，我确实弄清楚了某些filter属性会调整图标，因此尽管我最终没有弄清楚如何使其具有任何颜色，但幸运的是，我需要做的就是使它在深色背景上可见，所以我能够做到以下几点：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    body { background: black; }

    input[type="date"] {
      background: transparent;
      color: white;
    }

    input[type="date"]::-webkit-calendar-picker-indicator {
      filter: invert(100%);
    }
    1
    2
    3
    <body>
     <input type="date" />
    </body>

    希望这对大多数人来说可以帮助铬，甚至直接说这是不可能的。

    相关讨论