Html 是否可以禁用输入=时间清除按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19655250/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to disable input=time clear button
提问by Ahmed Ali
I am trying to restrict users input when selecting time on input=time.
so is it possible to disable the small clear button from the input?
我试图在选择时间时限制用户输入input=time。那么是否可以从输入中禁用小清除按钮？
采纳答案by Ilia Rostovtsev
Your straight-forward solution for all up-to-date browsers could be:
您针对所有最新浏览器的直接解决方案可能是：
input[type="time"]::-webkit-clear-button {
display: none;
}
If you're willing to specify it only for Internet Explorer 10 you should style it with
::-ms-clearpseudo-element:
如果您愿意仅为 Internet Explorer 10 指定它，则应使用::-ms-clear伪元素对其进行样式设置
：
input[type="time"]::-ms-clear {
display: none;
}
You could also do it using widthand heightfor all inputelements:
您也可以使用widthandheight为所有input元素执行此操作：
input::-ms-clear {
width: 0;
height: 0;
}
If you want to apply it only to input with text type:
如果您只想将其应用于文本类型的输入：
input[type=text]::-ms-clear {
display: none;
}
EDIT 1:
编辑 1：
If it doesn't work, then you must make sure that you haven't selected browser/documentmode other than IE10/Standard in F12 tools!
如果不行，那么你必须确保你没有在F12工具中选择IE10/Standard以外的浏览器/文档模式！
EDIT 2:
编辑2：
Additionally you might find other pseudo-controls interesting:
此外，您可能会发现其他有趣的伪控件：
/* 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;
}
回答by Tony
Just add the requiredattribute:
只需添加required属性：
<input type="date" required>
I tested it in Chrome and it's working fine for me.
我在 Chrome 中对其进行了测试，对我来说效果很好。
回答by smcjones
TL;DR there is no HTML-only or CSS-based way to have a time input and remove the clear button that works for all major browsers. To solve this for all browsers, you should use a JavaScript library and server validation (if you want to ensure a user is sending valid data). If you don't want to use JS, then it's probably best to use both approaches below. See this table for a comparison of compatibility:
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 Approach
CSS 方法
The prefix pseudo elements (::-webkit-*, ::-ms-*, ::-moz-*) explained by @Ilia Rostovtsev are browser specific and are not standard, even though many browser specific elements have eventually been adopted as standards and even though some of these non-standard pseudo elements are adopted by most or all major browsers. At this time, I am not aware of any Firefox equivalent for the webkitand msanswers.
@Ilia Rostovtsev 解释的前缀伪元素 ( ::-webkit-*, ::-ms-*, ::-moz-*) 是特定于浏览器的，不是标准的，尽管许多特定于浏览器的元素最终已被采纳为标准，即使其中一些非标准伪元素被大多数或全部采用主流浏览器。目前，我不知道webkit和ms答案有任何等效的 Firefox 。
Status: Works on all browsers except Firefox
状态：适用于除 Firefox 之外的所有浏览器
requiredApproach
required方法
<input type="time" required>
Looks good, works well on Chrome and Firefox, but does not work on Safari. In fact, Safari doesn't have a timeor datetype.
看起来不错，在 Chrome 和 Firefox 上运行良好，但在 Safari 上不起作用。事实上，Safari 没有timeordate类型。
Status: Doesn't work on Safari
状态：不适用于 Safari
JS Solution
JS解决方案
If you want it to work on all browsers, use a JS library like js-datepicker. It's been tested to work across browsers and restricts user input, with no clear button.
如果您希望它适用于所有浏览器，请使用js-datepicker 之类的 JS 库。它已经过测试，可以跨浏览器工作并限制用户输入，没有清除按钮。
Note on server validation
服务器验证注意事项
If you care at all about your back-end data and how it is stored at all (hint: You should), then validate it in the back-end too! Restricting user input on the front-end won't stop it from getting messed up by a determined or confused user. Server validation helps avoid strange bugs or XSRF injection attempts.
如果您完全关心您的后端数据及其存储方式（提示：您应该这样做），那么也在后端验证它！在前端限制用户输入不会阻止它被一个坚定或困惑的用户搞砸。服务器验证有助于避免奇怪的错误或 XSRF 注入尝试。
