How to get rid of x and up/down arrow elements of

Question

The only thing that I need showing up in the box there is the orange triangle, and I am not sure if I need CSS or something else to get rid of the two elements to the left of the triangle.

Is there a way to do so? I am just using the input type date.

Fiddle: http://jsfiddle.net/5M2PD/1/

Answer 1

Use the pseudo-class -webkit-inner-spin-button to style it specific for webkit-based browsers:

http://jsfiddle.net/5M2PD/2/

input[type=date]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    display: none;
}

If you want to change the style of the dropdown arrow, use the pseudo-class -webkit-calendar-picker-indicator:

input[type=date]::-webkit-calendar-picker-indicator {
    -webkit-appearance: none;
    display: none;
}

To eliminate the clear button, set the input to required:

http://jsfiddle.net/5M2PD/3/

<input type="date" required="required" />

Answer 2

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 <input type="text" />, 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;
}