Remove the 'X' (clear button) from the input type date and change the font family in Firefox

user_5224858 0
Viewed 4054

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.

firefox date input css html
3 Answers

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.

user_50787650

X or clear button

Even though the class referring to the clear button can be found through Shadow DOM inspection (i.e. .datetime-reset-button from datetimebox.css): Clear button class shadow path

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

Font family issues

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>
user_62258380

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

user_88001470
Related