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

Internist

Cheap shot is use custom datepicker (there are many libs / snippets for it) or even cheaper one is to set element to text input but in placeholder put correct date format so user gets it. Not ideal, but those shit are embedded in input element and seem hard AF to get rid of. There used to be some webkit selectors to do so but ones I had no longer work. Its anoying to the max since on small elements it takes half the space – Imprinting

thanks @DanteTheSmith if I have no other answer I may be forced to do this, would be great not to though :) – Internist

Feel free to answer your own question if you find solution before anyone else. I uped the question, hopefully someone will know how to do this more smoothly. But I fear for the maintainability of solutions, that's why I go with custom datepickers. – Imprinting

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/

Other

This does work and is as you say. FYI for anyone reading you may have to use Js to target the firefox browser specifically as it doesn't work that great on chrome and hover styles. I'm reluctant to put this as the answer as it'll conflict with elements inside the input. – Internist

Yeah, I agree. This is just the best that I could come with. And even I didn't end up ultimately using this solution myself when I encountered this problem. I just gave up and exempted date inputs from my custom JS-based clear field that I applied to other inputs in favor of the native one for date inputs. Nevertheless, I figured some folks might be interested in going deeper down the rabbit hole of making totally custom input fields than I was, and this approach could help folks get there, so even though I ultimately declined to use it myself, I figured I might as well post it. – Other