如何设置输入类型"time"样式

Question

我正试图找到一个解释如何完全样式化输入类型"时间"的来源。我找不到一个例子来解释所有的样式属性！

我只找到了一个：

input[type="time"]{
/**style goes here **/
}

这没有多大帮助。。

尝试过这个：

input[type="time"]::-webkit-inner-spin-button { 
-webkit-appearance: none;
cursor:pointer;
display: block;
width:20px;
color: red;
text-align:center;
position:relative;
} 

例如，微调器不会变红。

Answer 1

我在Chrome/webkit中对输入进行了一些样式设计，但我不知道如何在Firefox中对任何内容进行样式设计。这是我在Codepen上制作的一个演示。

input[type=time] {
border: none;
color: #2a2c2d;
font-size: 14px;
font-family: helvetica;
width: 180px;
}
/* Wrapper around the hour, minute, second, and am/pm fields as well as 
the up and down buttons and the 'X' button */
input[type=time]::-webkit-datetime-edit-fields-wrapper {
display: flex;
}
/* The space between the fields - between hour and minute, the minute and 
second, second and am/pm */
input[type=time]::-webkit-datetime-edit-text {
padding: 19px 4px;
}
/* The naming convention for the hour, minute, second, and am/pm field is
`-webkit-datetime-edit-{field}-field` */
/* Hour */
input[type=time]::-webkit-datetime-edit-hour-field {
background-color: #f2f4f5;
border-radius: 15%;
padding: 19px 13px;
}
/* Minute */
input[type=time]::-webkit-datetime-edit-minute-field {
background-color: #f2f4f5;
border-radius: 15%;
padding: 19px 13px;
}
/* AM/PM */
input[type=time]::-webkit-datetime-edit-ampm-field {
background-color: #7155d3;
border-radius: 15%;
color: #fff;
padding: 19px 13px;
}
/* 'X' button for resetting/clearing time */
input[type=time]::-webkit-clear-button {
display: none;
}
/* Up/Down arrows for incrementing/decrementing the value */
input[type=time]::-webkit-inner-spin-button {
display: none;
}

<input type="time" value="13:30"/>

我在任何地方都找不到文件。我通过检查输入的内部DOM，将鼠标悬停在devTools中的每个元素上，查看它对应于UI的哪个部分，然后获取它的pseudo属性，达到了这一点。

如果你目前看不到内部DOM，你必须通过进入Chrome的DevTools Settings、Preferences、Elements来公开它，并确保启用了"Show user agent shadow DOM"选项。

Answer 2

还有另一个伪元素：-webkit-calendar-picker-indicator——显示在chrome中的时钟，允许您使用鼠标计时。

input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg);
}

<input type="time">

Answer 3

要设置输入类型date和time的样式，请使用以下css-

[type="date"] {
background:transparent url(/assets/images/calendar.png)  97% 50% no-repeat !important;
}
[type="date"]::-webkit-inner-spin-button {
display: none;
}
[type="date"]::-webkit-calendar-picker-indicator {
opacity: 0;
}
[type="time"] {
background:transparent url(/assets/images/clock.png)  97% 50% no-repeat !important;
}
[type="time"]::-webkit-inner-spin-button {
display: none;
}
[type="time"]::-webkit-calendar-picker-indicator {
opacity: 0;
}