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

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/

Solution 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" />

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

Solution 3:

Chrome (v79):

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

Firefox (v73):

Firefox has only the clear button for date inputs. To remove it, the field should be made required.

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

Safari (v13):

Safari doesn’t support type=’date’.