Remove 'clear' button on date input (iOS safari)

Question

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.

Answer 1

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