How to hide both arrows which comes on mouse over on input[type="date"]?

Question

For some reason, I want to hide the both arrow which comes on mouse over to input[type="date"] I used -webkit-appearance: none; but it's not working. Is there any other way to achive this?

enter image description here

HTML

<input type="date">

CSS:

input[type="date"], 
input[type="date"]:hover 
{border:0;
background:transparent;
-webkit-appearance: none;}

code example http://jsbin.com/vovuha/1/edit

Here is an answer http://stackoverflow.com/questions/11320615/disable-native-datepicker-in-google-chrome — Pugazh, May 11 '15 at 13:57

score 2 · Accepted Answer · answered May 11 '15 at 13:59

2

To hide all effects on hover you can use:

pointer-events: none !important;

answered May 11 '15 at 13:59

Brane

3,257
2
42
53

I'm glad I was able to help :) – Brane May 11 '15 at 14:15

How to hide both arrows which comes on mouse over on input[type="date"]?

1 Answers1

Linked