Home / Questions / 229840
Accepted
Juan
Asked: 2020-01-16 08:19:19 +0800 CST 2020-01-16 08:19:19 +0800 CST

日期类型输入中的日期选择器样式（日期）

  • 772

是否可以在日历中无法选择的日期（min="current day"）中添加一个非常标记的css类，例如黑色背景？正如您在图像中看到的那样，无法选择的日期有一个非常灰色。显然，有视觉障碍的用户可以访问该页面。

<input type="date" name="fechaInicio" id="fechaInicio" 
min="2019-01-15" max="2020-01-01" class="readonly">

<script>
 $(".readonly").keydown(function(e){
    e.preventDefault();
});
</script>

在此处输入图像描述

html

3 Answers

  1. 据我所知，您无法更改日历的样式（链接）：

    如何更改日期选择器的外观？

    您当前无法设置日期选择器的外观样式。在 WebKit 中，我们之前提供了使用 -webkit-appearance CSS 属性或 ::-webkit-foo 伪类选择器来设置表单控件样式的方法。然而，日历弹出在 WebKit 中没有提供这样的方式，因为它与文档是分开的，就像 的弹出菜单一样，并且目前还没有关于如何控制其子元素样式的标准。

    可以改变的是带有伪类的输入的外观，webkit但我认为您不感兴趣。这是从此codepen获得的示例：

    $(document).ready(function () {
    $('input[type="date"]').click();

});

function closeDate(dateInput) {
    $(dateInput).attr('type', 'text');
    $(dateInput).attr('type', 'date');
}
    input[type=date] {
  height: 35px;
  margin: 0 auto;
  width: 100%;
  font-family: arial, sans-serif;
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  background-color: #959595;
  outline: none;
  border: 0;
  border-radius: 3px;
  padding: 0 3px;
  color: #fff;
}
input[type=date]::-webkit-datetime-edit-month-field {
  color: red;
}
input[type=date]::-webkit-datetime-edit-day-field {
  color: white;
}
input[type=date]::-webkit-datetime-edit-year-field {
  color: blue;
}
input[type=date]::-webkit-clear-button {
  font-size: 18px;
  height: 30px;
  position: relative;
  right: 5px;
  margin-right: 4px;
}
input[type=date]::-webkit-inner-spin-button {
  height: 30px;
}
input[type=date]::-webkit-calendar-picker-indicator {
  font-size: 18px;
}
input[type=date]::-webkit-calendar-picker-indicator:hover {
  background-color: #959595;
  color: #e6e6e6;
  cursor: pointer;
}
input[type=date]::-webkit-calendar-picker-indicator:active {
  color: blue;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" name="fechaInicio" id="fechaInicio" 
min="2019-01-15" max="2020-01-01" class="readonly">

<script>
 $(".readonly").keydown(function(e){
    e.preventDefault();
});
</script>

    • 1
  2. Best Answer

    基本上，目前不可能更改日期选择器的样式，因为它是一种依赖于每个浏览器技术的实现，每个浏览器都需要自己的样式（Chrome、Vivaldi 和 Opera 有一些东西，但它只影响字段而不是日期选择器）。

    MDN 上有更多关于它的信息： https ://developer.mozilla.org/es/docs/Web/HTML/Elemento/input/date

    至于 Chrome，开发者博客解释说（目前）无法更改日期选择器的样式：

    如何更改日期选择器的外观？

    您目前无法为日期选择器的外观设置样式。在 WebKit 中，我们之前提供了使用 -webkit-appearance CSS 属性或 ::-webkit-foo 伪类选择器设置表单控件样式的方法。然而，日历弹出在 WebKit 中没有提供这样的方式，因为它与文档是分开的，就像 的弹出菜单一样，并且目前还没有关于如何控制其子元素样式的标准。

    我们感兴趣的部分是段落中的粗体部分（近似翻译）：

    您目前无法更改日期选择器的样式/外观。

    上述信息更新至 2019 年 1 月 14 日。

    更多信息（英文）请访问以下链接：https ://developers.google.com/web/updates/2012/08/Quick-FAQs-on-input-type-date-in-Google-Chrome

    • 1

  3. 我能够更改输入类型 date 内的图标颜色；就我而言，我只是想将其更改为白色，因为背景很暗。

    input[type="date"]::-webkit-inner-spin-button,::-webkit-calendar-picker-indicator{
    filter: drop-shadow(16px 16px 20px rgb(255, 255, 255)) invert(100%);
}
input[type="date"]{
    background-color:pink;
}
    <input type="date" />

    input[type=date]::-webkit-inner-spin-button,::-webkit-calendar-picker-indicator{
filter: drop-shadow(16px 16px 20px rgb(255, 255, 255)) invert(100%);

    }

    • 0