53

enter image description here

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/

nbro
  • 15,395
  • 32
  • 113
  • 196
Paulius Dragunas
  • 1,702
  • 3
  • 19
  • 29

4 Answers4

94

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" />
saluce
  • 13,035
  • 3
  • 50
  • 67
  • Thanks. but the x element still remains, i am not sure what exactly it is called, so I don't really know what to search so find the appropriate webkit name for it. – Paulius Dragunas Jul 30 '13 at 19:13
  • 1
    Add `required="required"` to the input element – saluce Jul 30 '13 at 19:22
  • 1
    Unfortunately, though...if you don't actually want it to be required, there isn't really any way to remove the clear button in webkit browsers. – saluce Jul 30 '13 at 19:23
  • Thank you!. Also if I wanted to replace ::-webkit-calendar-picker-indicator with a downwards chevron, would that be possible? I am looking at this: http://davidwalsh.name/webkit-appearance and there doesnt seem to be a helpful option – Paulius Dragunas Jul 30 '13 at 22:25
  • are there mozilla equivalents? nm, firefox doesn't add wierd stuff in there. – bjo Mar 06 '14 at 17:04
  • @saluce there is a way now, see vee's answer – Gabriel Duarte Jul 25 '17 at 19:59
47

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;
}
vee
  • 1,247
  • 16
  • 18
4

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’.

Namitha Reval
  • 551
  • 1
  • 7
  • 13
-1

Removes (x) on input type date. Only works for Internet Explorer.

.input_base input[type="date"]::-ms-clear {
  display: none;
}
George Sun
  • 968
  • 8
  • 21
Marilyn Negrete Aguilar
  • 1
  • 2