46

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

在此处输入图像描述

4

3 回答 3

64

只需添加required属性：

<input type="date" required>

我在 Chrome 中对其进行了测试，它对我来说运行良好。

于 2016-10-11T12:48:25.620 回答
43

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

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

如果你愿意只为 Internet Explorer 10 指定它，你应该使用
::-ms-clearpseudo-element来设置它的样式：

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

您也可以使用widthandheight对所有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; 
}
于 2013-10-29T10:22:08.377 回答
11

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-*）是特定于浏览器的，不是标准的，尽管许多特定于浏览器的元素最终被采用为标准，即使这些非标准伪元素中的一些被大多数或全部采用主流浏览器。目前，我不知道有任何 Firefox 等效于webkit和ms答案。

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

required方法

<input type="time" required>

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

状态：无法在 Safari 上运行

JS解决方案

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

服务器验证注意事项

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

于 2017-12-20T20:15:02.933 回答