Firefox Quantum (57) <input type="date"> UI Close/delete button Hide

Question

Since updating firefox we now have small (x) buttons appearing in the input as part of firefox's UI controls.

Is there any way I can hide/remove these buttons using css?

You can see this on the firefox input date webpage on mozilla here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

or view image here

Answer 1

clip-path is a crude approach you can use that works:

input[type=date] {
  border: 0;
  clip-path: inset(0 17px 0 0);
  width: 120px
}

https://jsfiddle.net/21zwe8yu/