How to remove the blue cross on datetime-local HTM

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.

Answer 1

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

Answer 2

You have to use the required attribute.