How to get rid of x and up/down arrow elements of a input date?

Question

The only thing that I need showing up in the box there is the orange triangle,

Answer 1

To remove the clear button, use this:

::-webkit-clear-button
{
    display: none; /* Hide the button */
    -webkit-appearance: none; /* turn off default browser styling */
}

As a side note, to do this in IE10+ (source), use this:

::-ms-clear { }

Note that this one works on , since IE now places a clear button there as well.

To style the rest of the date control in WebKit browsers, I would recommend having a look at this link. To summarize it, you can play with the following pseudo classes:

::-webkit-datetime-edit { }
::-webkit-datetime-edit-fields-wrapper { }
::-webkit-datetime-edit-text { }
::-webkit-datetime-edit-month-field { }
::-webkit-datetime-edit-day-field { }
::-webkit-datetime-edit-year-field { }
::-webkit-inner-spin-button { }
::-webkit-calendar-picker-indicator { }

I would also highly recommend using the following in order to turn off the default browser styles; I've found this to be especially useful when working with mobile browsers:

input[type="date"]
{
    -webkit-appearance: none;
}