在日期输入中删除“清除”按钮（iOS Safari） [英] Remove 'clear' button on date input (iOS safari)

问题描述

是否可以删除iOS Safari上<< input type =date> 输入字段的清除按钮（ image ）？
我已经尝试过使用所需但它不适用于iOS6或iOS7。

解决方案

其实，这很漂亮通过为所有最新的浏览器指定一个伪类来实现这一点。

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

 < input type =daterequired =required/> 
  

-
然后尝试以下伪类 -webkit-clear-button ：专门为基于webkit的浏览器设计风格：

  / *隐藏日期输入中的清除按钮* / 
 
 input [type =date] ::  -  webkit-clear-button {
 -webkit-appearance：none; 
 display：none; 
} 
  

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

例如:(（从日期输入中隐藏微调）

$ $ p $ $ $ $ $ $ $从日期输入中隐藏旋转按钮* /

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

在IE上，可以通过指定Internet Explorer 10+来指定< code $ :: ms-clear 伪元素：

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

我在 JSFiddle ，它使用特定的伪元素来设置输入日期控件的样式。

另外，您会发现这两个堆栈非常有用：禁用输入=时间清除按钮和 css输入日期如何摆脱x和上/下箭头元素

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

Is it possible to remove the "clear" button of a <input type="date"> input field on iOS Safari (image)? I have tried using required but it doesn't work on iOS6 or iOS7.

解决方案

Actually, this is pretty straight forward to be achieved by specifying a "pseudo-class" for all up-to-date browsers.

If setting the input to "required" to eliminate the clear button does not work...

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

- Then try the following pseudo-class -webkit-clear-button to style it specifically for webkit-based browsers:

/* Hide the clear button from date input */

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

You could also explore other interesting pseudo-elements to style the date input.

E.g: (Hide the spinner from date input)

/* Hide the spin button from date input */

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

On IE, it could be achieved by targeting Internet Explorer 10+ specifying the ::-ms-clear pseudo-element:

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

I've built an example on JSFiddle which makes use of specific pseudo-elements in order to style the input date control.

Additionally, you would found these two stacks very helpful: disable input=time clear button and css input-date how to get rid of x and up/down arrow elements

Here's an interesting article about Pseudo-Elements and how to use them to style form controls: http://goo.gl/Y69VN6

这篇关于在日期输入中删除“清除”按钮（iOS Safari）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！