Remove background arrow from date input in Google Chrome v20

Question

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?

Image showing a dropdown with the arrow

@Nik I'm using a simple . This is also visible when applying anywhere else on the web. — Danimt, Jul 11 '12 at 08:21
http://stackoverflow.com/questions/29436074/change-date-input-triangle-to-a-calendar-icon — Ravi Ranjan, Nov 07 '15 at 09:46

score 76 · Accepted Answer · edited Jul 06 '17 at 11:06

76

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.

edited Jul 06 '17 at 11:06

Keith

150,284
78
298
434

answered Jul 10 '12 at 17:29

jfrej

4,548
29
36

Thanks for answering, I didn't want to remove semantic value to the input but since I'll be using a custom datepicker I guess It won't matter. – Danimt Jul 11 '12 at 08:26
Yeah, that's exactly my problem with it - `type=date` is more semantic. But until Chrome (and Opera!) gives the option to disable the calendar popup we might have to use `text` instead. – jfrej Jul 11 '12 at 09:14
Making type='datetime' won't display calendar popup in Chrome and also keep the date validation in IE. – YuMei May 07 '13 at 17:27
Yes, but it's because `datetime` is not implemented in Chrome. It is, however, implemented (to some extent) in Safari and Opera so not a perfect solution. See this article: http://swatelier.info/at/forms/dateTime.asp – jfrej May 08 '13 at 10:30
The alt + down arrow seems quite overkill to me. Awesome research. – Jeff Noel Jul 30 '13 at 18:58
5

This isn't answering the question at all. The main question was all about removing just the arrow, not the entire html5 date-picker. – Fabián Oct 02 '14 at 20:57
It's awesome. Thanks! – Khanh Tran Aug 21 '15 at 23:37

score 30 · Answer 2 · answered Mar 12 '13 at 22:19

30

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;
}

answered Mar 12 '13 at 22:19

Jeremy Ricketts

2,601
4
29
28

2

It should be noted that this does not actually remove the spin buttons. The recommended fix for this is `::-webkit-calendar-picker-indicator { display: none; }` as documented on the WebKit wiki. Additionally as indicated by jfrej you need to add some JavaScript to disable the key bindings. See http://trac.webkit.org/wiki/Styling%20Form%20Controls#Dateinputtype – Josiah Mar 19 '13 at 01:07

Type-Style · Answer 3 · 2015-02-27T11:34:55.050

adding to @jfrej: (cannot comment at the moment)

To kill all effects chrome applies to the input You need to clear the "x" (clear) Button too. ::-webkit-clear-button

To prevent the showing of the default text. Which is not a placeholder or a value you can use ::-webkit-datetime-edit-fields-wrapper But be carefull, you cannot see the value anymore.

.unstyled::-webkit-clear-button {
    display: none;
    -webkit-appearance: none;
}



#dateInput:not([value])::-webkit-datetime-edit-fields-wrapper,
#dateInput[value=""]::-webkit-datetime-edit-fields-wrapper { 
    visibility: hidden;
}

http://fiddle.jshell.net/RgY3t/66/

score 2 · Answer 4 · answered Jul 10 '12 at 17:57

2

I don't think can right now. They are working on a concept called Shadow DOM which will allow you to manipulate and style the default templates. I believe it is available in Chrome Canary so you can try using that.

answered Jul 10 '12 at 17:57

Maurice

27,582
5
49
62

score 2 · Answer 5 · edited Sep 29 '19 at 11:45

2

You can put it like this

input[type="date"]::-webkit-calendar-picker-indicator{
       background-image: url(images/calendar-icon.png);
       background-position: center;
       background-size: 20px 20px;
       background-repeat: no-repeat;
      color: rgba(204,204,204,0);
}

by putting the color attribute into 0 opacity you will make the arrow disappear

edited Sep 29 '19 at 11:45

Vitaly Zdanevich

13,032
8
47
81

answered Dec 15 '15 at 08:01

user5681092

31
1

score 0 · Answer 6 · answered Sep 07 '20 at 21:51

 input[type="date"] {
        &::-webkit-inner-spin-button,
        &::-webkit-calendar-picker-indicator {
            -webkit-appearance: none;
            position: absolute;
            right: 0;
            opacity: 0;
        }
        width: 100%;
    }

Here, I have a fontawesome pseudo-icon(caret) at the far right. Therefore, i place the calendar icon in that position, whenever a user clicked on the caret it performs the function of the invisible calendar icon

Remove background arrow from date input in Google Chrome v20

6 Answers6

Linked

Related