是否可以禁用input = time clear按钮

Question

我在选择时间时试图限制用户输入input=time.那么可以从输入中禁用小的清除按钮吗？

Answer 1

只需添加required属性:

<input type="date" required>

我在Chrome中测试了它,它对我来说很好.

Answer 2

您对所有最新浏览器的直接解决方案可能是:

input[type="time"]::-webkit-clear-button {
    display: none;
}

如果您愿意仅为Internet Explorer 10指定它,则应使用
::-ms-clear伪元素设置样式 :

input[type="time"]::-ms-clear {
    display: none;
}

您也可以使用width和height为所有input元素执行此操作:

input::-ms-clear {
    width: 0;
    height: 0;
}

如果要将其仅应用于具有文本类型的输入:

input[type=text]::-ms-clear {
    display: none;
}

编辑1:

如果它不起作用,那么你必须确保在F12工具中没有选择除IE10/Standard之外的浏览器/文档模式!

编辑2:

另外,您可能会发现其他伪控件很有趣:

/* Hide the cancel button */
::-webkit-search-cancel-button { 
    -webkit-appearance: none; 
}

/* Hide the magnifying glass */
::-webkit-search-results-button {
     -webkit-appearance: none; 
}

/* Remove the rounded corners */
input[type=search] { 
    -webkit-appearance: none; 
}

Answer 3

TL;DR 没有纯 HTML 或基于 CSS 的方式来输入时间并删除适用于所有主要浏览器的清除按钮。要为所有浏览器解决此问题，您应该使用 JavaScript 库和服务器验证（如果您想确保用户发送有效数据）。如果您不想使用 JS，那么最好同时使用以下两种方法。有关兼容性的比较，请参阅此表：

+---------+-------------------------+--------------+-------------+
|         | <input required>        | CSS approach | JS approach |
+---------+-------------------------+--------------+-------------+
| Firefox | Y                       | N            | Y           |
| Chrome  | Y                       | Y            | Y           |
| Safari  | N                       | Y            | Y           |
+---------+-------------------------+--------------+-------------+

CSS 方法

@Ilia Rostovtsev 解释的前缀伪元素 ( ::-webkit-*, ::-ms-*, ::-moz-*) 是特定于浏览器的，不是标准的，尽管许多特定于浏览器的元素最终已被采纳为标准，即使其中一些非标准伪元素被大多数或全部采用主流浏览器。目前，我不知道webkit和ms答案有任何等效的 Firefox 。

状态：适用于除 Firefox 之外的所有浏览器

required 方法

<input type="time" required>

看起来不错，在 Chrome 和 Firefox 上运行良好，但在 Safari 上不起作用。事实上，Safari 没有timeordate类型。

状态：不适用于 Safari

JS解决方案

如果您希望它适用于所有浏览器，请使用js-datepicker 之类的 JS 库。它已经过测试，可以跨浏览器工作并限制用户输入，没有清除按钮。

服务器验证注意事项

如果您完全关心您的后端数据及其存储方式（提示：您应该这样做），那么也在后端验证它！在前端限制用户输入不会阻止它被一个坚定或困惑的用户搞砸。服务器验证有助于避免奇怪的错误或 XSRF 注入尝试。