html – 删除日期输入上的“清除”按钮(iOS safari)

前端之家收集整理的这篇文章主要介绍了html – 删除日期输入上的“清除”按钮(iOS safari)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
是否可以删除< input type =“date”>的“清除”按钮? iOS Safari( image)上的输入字段?
我尝试过使用必需但它在iOS6或iOS7上不起作用.

解决方法

实际上,通过为所有最新的浏览器指定“伪类”,可以很容易地实现这一点.

如果将输入设置为“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 buttoncss input-date how to get rid of x and up/down arrow elements

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

猜你在找的HTML相关文章