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

例如，微调器不会变红。

原文由 basickarl 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 设置、首选项、元素来公开它，并确保启用“显示用户代理影子 DOM”选项。

原文由 tryenc 发布，翻译遵循 CC BY-SA 4.0 许可协议