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上放在一起的demo。

use AppleScript version "2.4" -- Yosemite (10.10) or later
use framework "Foundation"

on stripSpaces(thisText)
    set nsText to current application's NSString's stringWithString:thisText
    return (nsText's stringByReplacingOccurrencesOfString:" " withString:"") as text
end stripSpaces

log stripSpaces("   spa     .          nish  . txt  ")

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;
}

我在任何地方都找不到文档。通过检查输入的内部DOM，将鼠标悬停在devTools中的每个元素上，以查看它对应于UI的哪个部分，然后抓住其<input type="time" value="13:30"/>属性，就可以达到这一目的。

如果您当前看不到内部DOM，则必须通过进入Chrome的DevTools设置，首选项，元素来公开内部DOM，并确保启用了“显示用户代理阴影DOM”选项。

Answer 2

要设置输入类型 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;
}

Answer 3

还有另一个伪元素：-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">

如何设置输入类型“时间”的样式

3 个答案: