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

Question

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

Answer 1

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

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

如果您愿意仅为Internet Explorer 10指定它，则应使用它进行样式设置
::-ms-clear pseudo-element：

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 2

只需添加required属性：

<input type="date" required>

我在Chrome中测试了它，它对我来说很好。

Answer 3

简短的回答是 ，不是没有JavaScript，没有。 并不总是可以删除清除按钮。每个浏览器都需要在CSS中使用它，并且 此时不是CSS中的标准 。此外，许多浏览器没有清晰的按钮，这使得自己难以解决。有一些方法可以使用JavaScript，并且没有时间输入元素上的清除按钮。但是，这并不能解决您关注的第一部分：

  

我在选择时间时试图限制用户输入

这里的答案是 NO HTML或FRONT-END SOLUTION EXISTS限制用户输入时间 。如果您继续阅读，原因应该是清楚的。

为什么在所有浏览器上都无法实现这一点？

前缀伪元素（::-webkit-*，::-ms-*，::-moz-*）是特定于浏览器的，并不是标准的，即使最终采用了许多特定于浏览器的元素作为标准，即使有些大多数或所有主流浏览器都采用这些非标准伪元素。目前，我不知道webkit和ms答案的任何Firefox等价物。更重要的是，如果您的主要问题是限制用户输入，这可能是最后要担心的事项。

为什么我不能在纯HTML中限制用户输入？

因为所有HTML验证（包括此验证）都很容易被熟悉HTML的人所规避。

HTML5验证是为了帮助用户在提交之前验证其数据而创建的，并且在将数据插入系统之前不应该用于验证数据。

无论是通过CSS，JavaScript还是HTML属性完成，都是如此。

如果您想在提交

之前验证您的数据

然后不要担心时间元素的实际外观。相反，在Tony's回答中设置输入元素required=true。您当然可以在特定浏览器的CSS规则可用的位置添加它们。

如果您更担心数据的外观

如果您不喜欢清除按钮，那么您仍然可以使用特定于浏览器的CSS。请注意，只需按退格键删除值即可轻松避免这种情况。习惯于具有x按钮的time输入类型的人可能会因为额外的步骤而烦恼。

如果您想微调输入框的外观，请使用this one之类的JavaScript包或自行滚动。您将使用它代替<input type="time">，而不必使用清除按钮。

无论哪种方式......

如果你完全关心你的后端数据及其存储方式（提示：你应该），那么在后端验证它。如果你没有，那么有人可以进入检查员，将文本类型更改为“文本”并添加<script type="text/javascript">alert('Free lotto tickets! Visit https://pwned.io today!');</script>之类的内容，只是为了看看会发生什么。