删除日期输入上的"清除"按钮(iOS safari)

Question

是否可以删除<input type="date">iOS Safari(图像)上输入字段的"清除"按钮？我尝试过使用必需但它在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上构建了一个示例,它使用特定的伪元素来设置输入日期控件的样式.

另外,您会发现这两个堆栈非常有用:禁用input = time clear按钮和css输入日期如何摆脱x和向上/向下箭头元素

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