删除日期输入上的“清除”按钮（iOS Safari）答案

【问题标题】：Remove 'clear' button on date input (iOS safari)删除日期输入上的“清除”按钮（iOS Safari）
【发布时间】：2013-11-13 12:04:31
【问题描述】：

是否可以删除 iOS Safari (image) 上 <input type="date"> 输入字段的“清除”按钮？我尝试过使用 required 但它在 iOS6 或 iOS7 上不起作用。

【问题讨论】：

标签： ios html safari

【解决方案1】：

实际上，通过为所有最新的浏览器指定一个“伪类”来实现这一点非常简单。

如果将输入设置为“必需”以消除清除按钮不起作用...

<input type="date" required="required" />

- 然后尝试以下伪类 -webkit-clear-button 来专门为基于 webkit 的浏览器设置样式：

/* Hide the clear button from date input */

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

您还可以探索其他有趣的伪元素来设置日期输入的样式。

例如：（从日期输入中隐藏微调器）

/* Hide the spin button from date input */

input[type="date"]::-webkit-inner-spin-button { 
  -webkit-appearance: none;
  display: none;
}

在 IE 上，可以通过针对 Internet Explorer 10+ 指定 ::-ms-clear 伪元素来实现：

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

我在JSFiddle 上构建了一个示例，它使用特定的伪元素来设置输入日期控件的样式。

此外，您会发现这两个堆栈非常有用：disable input=time clear button 和 css input-date how to get rid of x and up/down arrow elements

这是一篇关于伪元素以及如何使用它们来设置表单控件样式的有趣文章：http://goo.gl/Y69VN6

【讨论】：

仍然显示清除按钮，在 iOS7 safari (iPad AIR) 上测试。
@Rob Fox，我明白了。 - 您是否尝试过放置 !important 声明以防浏览器不优先考虑它？ - 我也刚刚在 iOS7 上测试过它，它似乎开箱即用。 see image.
是的，葡萄牙语中的“Limpar”在英语中的意思是“清除”，至少在我们所谈论的上下文中是这样。顺便说一句，你有什么进展吗？
嘿@Rob Fox，我很抱歉，但事实证明我完全错过了你的问题的重点......现在仔细看看你提供的图片，我明白你的意思使用“删除清除按钮”-您正在谈论 iPad 上 iOS 上的弹出框内的按钮，以及 iPhone 上的按钮，对吗？我在想您是在提到日期输入上的清除按钮，例如see image。那么，让我们研究一下吧！您是在开发网络应用还是混合/原生应用？
啊哈！是的，我正在开发一个混合应用程序，但不知道如何删除这个细节

【解决方案2】：

我尝试了上面提到的所有方法，但都没有奏效。

但是，您可以通过提及更改事件来处理清除按钮事件。

HTML 文件：

<input type="date" (change)="dateChanged($event)" />

当用户单击清除时，它将在此事件中发送空字符串作为值，因此您可以通过将值检查为空字符串来做任何您想做的事情。下面是代码：

.ts 文件代码：

dateChanged(event){
if(event.target.value='' || event.target.value.length==0){
//your code , whatever you want to do when user hit clear in Date control. 
}
}

在我的例子中，我想在用户点击清除时将今天的日期设置为默认日期。它对我有用。

【讨论】：

【解决方案3】：

可以通过设置 required-Attribute 来禁用清除按钮 - 这似乎有点合乎逻辑，因为不应该清除所需的输入。

<input type="date" name="foo" value="2018-06-08" required />

在当前版本的 FF、Chrome、Edge 中测试

【讨论】：