How to remove the blue cross on datetime-local HTML input in Chrome 27?

Question

I was using the datetime-local input but since Chrome v27 a blue cross appears which allows to clear the choosen datetime. I don't want it and get back to the input we had with chrome 26.

Here is how I define the input:

<input  type="datetime-local" value="1985-04-12T23:20:50.52"/>

See it in this jsFiddle. Open it with Chrome 27 to see the blue cross

Do you know how to remove this blue cross?

Edit :

As a temporary workaround, I've disabled the blue cross functionality by resetting the value if the new one was cleared (see it in JSFiddle )

$('input#testInput').on('change', function(event)
{    
    var newValue = $('input#testInput').val();
    if(!newValue || newValue === "")
    {
        $('input#testInput').val(lastValue);
    }
    else
        lastValue = newValue;
});

It doesn't really fit the initial need so I'm still looking for a good solution.

You mentioned that your fix doesn't fit the need, so I'm curious what the actual need is? The whole point of using the HTML5 input controls is that you're allowing the browser to render the input field as it sees fit. Other browsers that support this feature will render it differently. In particular, it will show up completely differently on various mobile browsers. If you want to define how the control looks you're kinda defeating the point of using the HTML5 input controls in the first place. You may as well use the jquery datepicker plugin, where you do get all the configurability you want. — Spudley, May 22 '13 at 10:51
indeed I can use a jquery datetime picker like this one : http://trentrichardson.com/examples/timepicker/ anyway the question was, is there a way back to the previous behaviour in chrome ? — Guian, May 22 '13 at 10:59
direct answer: no, probably not. That's the way it rolls with Chrome; they release a new version, everyone gets updated automatically, we all get new stuff. We don't really get much say on whether we like the new stuff though. — Spudley, May 22 '13 at 11:04
Anyone here have any suggestions on how to fix this in Firefox? I just asked the question today - https://stackoverflow.com/questions/49527186/how-to-remove-cross-on-date-and-time-html-inputs-in-firefox/49527552#49527552 — Evolve, Mar 28 '18 at 07:12

score 39 · Answer 1 · answered May 22 '13 at 14:31

39

This is how you remove cross and arrows:

input::-webkit-outer-spin-button, /* Removes arrows */
input::-webkit-inner-spin-button, /* Removes arrows */
input::-webkit-clear-button { /* Removes blue cross */
  -webkit-appearance: none;
  margin: 0;
}

answered May 22 '13 at 14:31

Lasse

391
1
3
2

2

This is really perfect, thanks mister ! Here's the jsFiddler with the result : http://jsfiddle.net/56Yzn/3/ Where did you find this information ? – Guian May 22 '13 at 16:55

score 15 · Accepted Answer · edited Feb 15 '16 at 23:47

15

You have to use the required attribute.

edited Feb 15 '16 at 23:47

benomatis

5,536
7
36
59

answered Feb 15 '16 at 14:41

Johannes N.

2,364
3
28
45

How to remove the blue cross on datetime-local HTML input in Chrome 27?

2 Answers2

Linked