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