Question

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

Answer 1

实际上，通过为所有最新浏览器指定“伪类”，可以很容易地实现这一目标。

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

<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上，可以通过定位指定::-ms-clear伪元素的Internet Explorer 10+来实现：

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

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

Answer 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. 
}
}

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

Answer 3

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

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

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

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

3 个答案: