ios - 删除日期输入上的 'clear' 按钮(iOS safari)

Question

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

Answer 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