从输入类型日期中删除“X”（清除按钮）并更改 Firefox 中的字体系列

Posted 2023-03-04

【中文标题】从输入类型日期中删除“X”（清除按钮）并更改 Firefox 中的字体系列

【英文标题】：Remove the 'X' (clear button) from the input type date and change the font family in Firefox

【发布时间】：2018-05-02 05:47:25

【问题描述】：

我的表单中有一个输入类型字段，但在 Firefox 中，当我在输入中设置了日期值时，我无法删除出现的 X 图标（清除按钮）。

此外，我无法更改该输入中的字体系列。好像是 Courier 字体家族，而不是 Arial 字体家族，目前整个网站都设置为默认字体。

【问题讨论】：

您能否更具体地了解字体问题？在元素检查器的“.datetime-reset-button”中写入“font-family : Arial”不起作用？

【参考方案1】：

无法删除 FireFox 中的清除按钮。 ::ms-clear 功能仅适用于 Microsoft 浏览器，如 MDN 文档中所述。

【参考方案2】：

X 或清除按钮

即使引用清除按钮的类可以通过 Shadow DOM 检查找到（即 datetimebox.css 中的 .datetime-reset-button）：

检查器/开发工具工作中的直接更改（例如，将display: none 添加到类中）shadow root access and shadow elements manipulation/attachment is not allowed in <input> tags，如果myInput.attachShadow(mode: 'open') 是，则导致“DOMException：不支持操作”尝试过（例如:host-context MDN example）。

另一种方法/解决方法是通过::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;
  

此叠加层可防止点击/点击 Shadow DOM 清除按钮，因为它实际上是在覆盖它（需要不透明背景才能完全隐藏它）。

字体系列问题

更改输入的字体，可能是一个特殊性问题，尝试更具体的选择器可能足以应用规则：

.my-datetime-input-container input[type="date"].my-specific-class 
  font-family: inherit;

地点：

<div class="my-datetime-input-container">
  <input type="date" class="my-specific-class" />
</div>

【参考方案3】：

我想你可以试试这个：

input[type=text]::-ms-clear 
  display: none;

但是文档警告::-ms-clear CSS 伪元素。

非标准此功能是非标准的，不在标准中 追踪。不要在面向 Web 的生产站点上使用它：它不会 为每个用户工作。之间也可能存在很大的不兼容 未来的实现和行为可能会发生变化。

检查这个：https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3A-ms-clear

【讨论】：

不幸的是，它不起作用。无论如何，谢谢你的回复。

也许我写错了输入类型，正如你提到的日期值，也试试 [type=date]

-ms 是 Microsoft 前缀，支持表也显示了很多。