使用输入类型=“时间”禁用 webkit 的输入掩码？答案

【问题标题】：Disable webkit's input mask with input type=“time”?使用输入类型=“时间”禁用 webkit 的输入掩码？
【发布时间】：2013-12-06 16:31:19
【问题描述】：

我想删除与类型时间相关的所有 webkit 内容（chrome）。我不想改变类型。

<input type="time">

http://jsfiddle.net/dDqX4/

我在删除 webkit 的东西时发现了类似的问题。

Can I hide the HTML5 number input’s spin box?

谢谢！

更新：
铬合金

如您所见，chrome 会破坏它。

【问题讨论】：

为什么不能使用 type=text？
您不想更改标记中的类型 - 您是否愿意以编程方式更改它？
只要它让我的控制充满时间并且它在 chrome 和 IE 中正常工作:)。我唯一能做到的是打字时间。换句话说，我需要一个日期选择器和一个时间选择器。我也不想使用 Trent 控件。

标签： javascript css .net html

【解决方案1】：

试试这个：

::-webkit-datetime-edit-ampm-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-millisecond-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-second-field,
::-webkit-datetime-edit-week-field,
::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-text {
  color: transparent;
}

【讨论】：

两年前你在哪里？！ :)
大声笑，当时没有帐户。来到这里寻找答案。找到你的帖子，后来找到了这个解决方案。所以贴出来以备日后参考。 :)

【解决方案2】：

input[type=time]::-webkit-clear-button,
input[type=time]::-webkit-outer-spin-button,
input[type=time]::-webkit-inner-spin-button {
    display:none;
}

http://jsfiddle.net/dDqX4/3/

【讨论】：

chrome 中的输入掩码仍然存在...按钮不见了，但这不是问题。

【解决方案3】：

试试这个

input[type=time]::-webkit-outer-spin-button,
input[type=time]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

input[type=time] {
    -moz-appearance:textfield;
}

【讨论】：

【解决方案4】：

如果您希望您的输入在有效但不在焦点时保持可见

input:not( :focus ) {
  color: transparent;
}
input:valid {
  color: inherit;
}

【讨论】：