如何设置 HTML5 输入类型 =“datetime-local”的样式 [重复]

Posted 2023-05-07

【中文标题】如何设置 HTML5 输入类型 =“datetime-local”的样式 [重复]

【英文标题】：How to style HTML5 input type="datetime-local" [duplicate]

【发布时间】：2016-05-07 20:08:53

【问题描述】：

我想设置 input type="datetime-local" 的日历部分的样式。如果您参考此链接，您将知道我在说什么。

http://test.csswg.org/suites/css-transforms-1_dev/nightly-unstable/html/transform-input-013.htm

为了选择日期，提供了一个箭头。现在日历弹出。我需要设计它。例如更改文本的颜色、日历的背景颜色。

知道怎么做吗？我在网上搜索时没有看到任何文档。

【问题讨论】：

@Juhana- 我之前看过那个帖子。它仅显示样式格式。不是弹出的日历

"Currently, there is no cross browser, script-free way of styling a native date picker" 似乎非常明确。

@Juhanatat 是在 2013 年。所以我认为这里和那里的情况可能发生了一些变化。 :(

【参考方案1】：

你可以在这里使用 Jquery UI 链接https://jqueryui.com/datepicker/

并像设置表格样式一样设置样式，请参见 fiddle 示例： https://jsfiddle.net/DIRTY_SMITH/rupbwpx0/

HTML 和 JQuery

  <p>Date: <input type="text" id="datepicker"></p>
  <script>
  $(function() 
    $( "#datepicker" ).datepicker();
  );
  </script>

CSS

tdbackground-color: lightblue;
theadbackground-color: lightgreen;

【讨论】：

这与原生 HTML5 input[type="datetime-local"]picker不相同