I have an input type field in my form, but in Firefox I am not able to remove the X icon (clear button) that appears when I have a date value set inside the input.
Moreover, I cannot change the font family in that input. It seems to be the Courier font family instead of the Arial font family, which is currently set as default in the whole website.
It is not possible to remove the clear button in FireFox. The ::ms-clear feature is only for Microsoft browsers, as described in the MDN documentation.
Even though the class referring to the clear button can be found through Shadow DOM inspection (i.e. .datetime-reset-button from datetimebox.css):
And direct changes in the inspector/devtools work (e.g. add display: none to the class), shadow root access and shadow elements manipulation/attachment is not allowed in <input> tags, leading to a "DOMException: Operation is not supported" if myInput.attachShadow({mode: 'open'}) is attempted (e.g. :host-context MDN example).
An alternative/workaround is to place an overlay image/background on the input's container through ::after:
@-moz-document url-prefix() { /* apply rules only to Firefox */
.my-datetime-input-container::after {
content: "";
position: absolute;
top: 42%;
right: 0.25rem;
background: url(/images/overlay.svg) white no-repeat;
/* or simply use background: white; */
background-size: 1rem;
width: 1rem;
height: 1rem;
}
}
This overlay prevents clicks/taps on the Shadow DOM clear button because it's literally covering it (needs an opaque background to completely hide it).
Changing the input's font, may be a specificity issue, attempting a more specific selector may be enough to apply the rule:
.my-datetime-input-container input[type="date"].my-specific-class {
font-family: inherit;
}
Where:
<div class="my-datetime-input-container">
<input type="date" class="my-specific-class" />
</div>
I think you could try this :
input[type=text]::-ms-clear {
display: none;
}
But the documentation warn about the ::-ms-clear CSS pseudo-element.
Non-standard This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
Check this : https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3A-ms-clear
