如何设置输入类型“时间"的样式 [英] How to style the input type "time"

问题描述

我试图找到一个解释如何完全设置输入类型时间"样式的来源.我找不到解释所有样式属性的单个示例！

I'm trying to find a source explaining how to fully style the input type "time". I cannot find a single example explaining all of the style attributes!

我发现的唯一一个是:

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

例如，Spinner 不会变成红色.

Spinner does not turn red for example.

推荐答案

我在 Chrome/webkit 中的输入样式方面取得了一些进展，但我不知道如何在 Firefox 中设置任何样式.这是我放在 Codepen 上的演示.

I made some progress styling the input in Chrome/webkit, but I can't figure out how to style anything in Firefox. Here's a demo that I put together on 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 属性.

I wasn't able to find documentation anywhere. I got this far by inspecting the input's internal DOM, hovering over each element in devTools to see what portion of the UI it corresponded to, then grabbed its pseudo attribute.

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

If you can't currently see the internal DOM, you'll have to expose it by going into Chrome's DevTools Settings, Preferences, Elements and make sure the "Show user agent shadow DOM" option is enabled.

这篇关于如何设置输入类型“时间"的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！