Since Google Chrome v20 a new calendar has been added to date inputs. The issue with this is that I'm using javascript to create my own calendar and I have an icon already in the same position as the default chrome arrow.
I was wondering how can I remove the arrow background?
As far as I know you can't disable it at the moment. There is a discussion going on here: https://plus.google.com/102860501900098846931/posts/hTcMLVNKnec
Perhaps they will add some -webkit
selectors to control the styling.
For now you might have to use <input type="text">
instead.
EDIT:
As per Jeremy's answer, it is now possible to remove the arrow and spin buttons. Details can be found on webkit.org: Styling Form Controls - WebKit
The CSS to hide the controls is:
<input type="date" class="unstyled" /> .unstyled::-webkit-inner-spin-button, .unstyled::-webkit-calendar-picker-indicator { display: none; -webkit-appearance: none; }
However, this will only hide and not disable the native calendar! - you can still activate the calendar by pressing Alt+Down Arrow (at least on Windows).
To disable, you need to add a little JavaScript as described on the above webkit.org page:
<input type="date" id="dateInput" class="unstyled" /> dateInput.addEventListener('keydown', function(event) { if (event.keyIdentifier == "Down") { event.preventDefault() } }, false);
You can see it working in this jsfiddle.
As of this writing, webkit has introduced controls to handle this:
input[type="date"]::-webkit-calendar-picker-indicator{ /* Your CSS here */ } input[type="date"]::-webkit-inner-spin-button { /* Your CSS here */ }
So, for this particular issue, it would be:
input[type="date"]::-webkit-calendar-picker-indicator, input[type="date"]::-webkit-inner-spin-button{ display: none; }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With