Question

我正在尝试更改某些浏览器中显示的日期选择器的颜色，但不知道选择器的名称。

HTML：

<form action="pledge.html" method="post">       
    <input type="date" id="birthday" name="user_bday">
</form>

CSS：

body {
    background-color: black;
}

input {
    height: 45px;
    width: 40%;
    border-width: 3px;
    border-style: solid;
    border-color: white;
    border-radius: 90px;
    margin: 10px;
    text-align: center;
    font-size: 24px;
    color: white;
    font-weight: bold;
    background-color: transparent;
    outline: none;
}

input[type="date"] {
  /*Something Goes Here Probably*/
}

这是一个小提琴

https://jsfiddle.net/froggomad/gznx60j1/25/

谢谢！

Answer 1

默认情况下，只有8个伪元素可使用webkit进行自定义

::-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

可悲的是，没有跨浏览器样式化本机日期选择器的方式。

Answer 2

您的选择器还可以。

input[type="date"] {
   /*CSS Rules*/
}

如果您的代码在一个浏览器上运行，而不在另一个浏览器上运行，则您需要编写受支持的跨浏览器代码，例如 -webkit- , -moz- 等。

但是，我建议您使用https://jqueryui.com/datepicker/来提高灵活性和更多功能。

输入字段的日期选择器选择器

2 个答案: