如何在 Firefox > 108 中设置日期输入日历图标的样式?

2023-11-26

在旧版本的 Firefox(直到 109)中,可以像 Chromium 一样选择日期选择器的图标:

input[type="date"]::-webkit-calendar-picker-indicator {
  display: none; /* Hides the icon in Chrome and Firefox < v109 */
}

这样就不再可能了,另请参阅这个代码笔。现在有人有解决方法吗?

我的日期输入有自定义图标,现在在新的 Firefox 版本中显示其中两个图标。现在,我正在执行一些用户代理嗅探并添加 CSS 类,以便我可以删除自定义图标:

    const userAgent = navigator.userAgent;
    const regex = /Firefox\/(?<majorRelease>\d+(\.\d+)?)/
    const match = userAgent.match(regex)
    const FirefoxVersion = match ? Number(match.groups.majorRelease) : null
    if (FirefoxVersion > 108){
        const inputs = document.querySelectorAll('.input[type="date"]')
        inputs.forEach((el)=>{
            el.classList.add('input-date-firefox-fix')
        })
    }

None

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 Firefox > 108 中设置日期输入日历图标的样式? 的相关文章

  • 多列定义列表[重复]

    这个问题在这里已经有答案了 我有一个 dl 像这样 dl dt Quantity dd dt Size dd dt Rise dd dt Color dd dd dt dd dt dd dt dd dt dl 该列表是通过 php 动态生成
  • 为什么 Flexbox 会拉伸我的图像而不是保留纵横比?

    Flexbox 具有这种行为 它将图像拉伸到其自然高度 换句话说 如果我有一个带有子图像的 Flexbox 容器 并且我调整了该图像的宽度 则高度根本不会调整大小 并且图像会被拉伸 div display flex flex wrap wr
  • 当鼠标悬停在链接上时,如何在链接旁边创建弹出框?

    这是我想要实现的 我的网页上显示了两个超链接 a href http foo com foo a a href http bar com bar a 我还有两个对 div 链接的描述 div foo means foo div div ba
  • 如何观察包含许多 sass 文件的整个目录/文件夹的变化

    我如何跟踪包含许多 sass 文件的整个目录的更改 我正在使用以下命令来观察 sass 的变化 file sass watch style scss style css 但是如何观察包含许多 sass 文件的整个目录 文件夹的变化 只需使用
  • 在导航栏下方添加背景图片

    我想在导航栏下方添加背景图像 具有完整窗口大小的宽度 它不应覆盖整个页面长度 而是从导航栏菜单下方开始 一直向下直到特定的指定高度 但宽度是满的 我参考了以下内容 但仍然没有结果 在 Twitter Bootstrap 中的导航栏下方启动背
  • 如何仅使用CSS设置某个角的边框半径

    如上所示 我可以只给顶部部分而不给底部提供半径 或者有时给底部而不是顶部提供半径吗 有没有办法只给一个角提供边界半径 Like border radius top left top right bottom right bottom lef
  • 如何在表格的 tbody/thead 部分周围创建边框?

    我正在尝试创建一个包含表格数据的页面 该页面必须显示为多个表格 然而 我有两个相互冲突的要求需要解决 每个表格周围都必须有边框 每个表格的列宽必须能够根据内容重新调整大小 但是 所有表中的列宽必须一致 即列的大小基于所有表中该列中最大的单元
  • Menu.Item 中的 Antd 自动换行

    可以在 Menu Item 组件中应用自动换行吗 示例不起作用
  • 使用本机 JavaScript 获取过渡中的 CSS 值

    这个问题之前被问过 但答案使用了 jQuery here https stackoverflow com q 8920934 3186555 因此 我将调整问题以专门询问native解决方案 to 最小化依赖关系 假设您有一个 div 然后
  • 从顶部开始在同一水平线上显示同一行中的两个 div

    这是我的代码 floating box display inline block width 150px margin 10px border 3px solid 73AD21 after box border 3px solid red
  • 检测 WebGL 支持的正确方法?

    我正在尝试跨多个浏览器检测 WebGL 支持 并且遇到了以下情况 当前版本的 Firefox 似乎使用以下检查来报告积极支持 即使访问者的视频卡被列入黑名单和 或 WebGL 被禁用 if window WebGLRenderingCont
  • 如何保留用户的输入打印?

    我正在尝试添加用户的评论 所以我只是尝试读取输入并将其发送以进行打印 但问题是 一旦我刷新页面或输入另一个输入 打印的输入就会消失 因此 即使刷新页面或重新输入新评论 我也希望始终保持所有用户的显示 代码 div div
  • 每 2 行后使 html 表格的边框变厚

    我创建了一个包含一些内容的表 其中有 12 行和 2 列 我想显示边框 但每 4 行之后 我想将水平边框设置为比正常情况更粗 怎么做 请在这里帮忙 试试这个选择器 table tr nth of type 4n td border bott
  • div 中的中心文本?

    我有一个div 30px高和500px宽的 这div可以包含两行文本 一行在一行 并相应地设置样式 填充 但有时它只包含一行 我希望它居中 这可能吗 要水平居中 请使用text align center 要垂直居中 只能使用vertical
  • 滚动时的 CSS 背景模糊

    我有固定的背景图像 滚动时我希望图像变得模糊 我知道如何在 css 中进行模糊 但在特定的滚动位置进行 这是一个例子 https medium com good music f160ba9e6c52 https medium com goo
  • 固定 div 位于居中 div 旁边

    我有一个网页 其中有可滚动的内容 此内容包含在 content 内 位于页面的中心 现在我希望导航栏出现在内容左侧 50 像素处 该栏应具有固定位置 不应滚动 这是我到目前为止所尝试过的 nav position fixed top 50
  • javascript 选择自定义光标 (svg)

    我正在动态地将光标更改为悬停时的本地 svg element on mouseover function this css cursor url svgs pointer svg 9 30 auto 工作正常 但我想选择该 svg 来操纵其
  • 使用 JavaScript 移动页面上的按钮

    我的按钮可以移动 但奇怪的是 我无法弄清楚偏移是否有问题 我希望我的按钮随着鼠标光标移动 但现在它的移动方式不是我想要的 有时它会消失 另外 创建的新按钮是重叠的 我不知道如何解决这个问题并拥有更好的外观 var coorA var coo
  • 使用javascript动态更新css内容

    需要将 css 更新为动态值 我不确定最好的方法是什么 div style zoom 1 div 缩放级别将根据窗口大小调整触发 应用程序将相应缩放 我将此应用程序加载到 cordova 中并让它在 iPAD 中运行 然后我意识到需要使用
  • css3按钮背景颜色无限过渡

    有没有办法仅使用 css3 使按钮的背景颜色从灰色渐变为蓝色 然后又回到灰色 一个很好的例子是默认操作按钮是可可 我知道这可以在 javascript 中完成 但我宁愿只使用 css 来完成此操作 您好 我已经通过 CSS3 动画制作了按钮

随机推荐

  • psycopg2 copy_expert() - 如何复制 gzipped csv 文件?

    如果我的表是 schema one table Five 并且我的文件名是 file to import csv gz 我应该为 copy expert cmd 提供什么参数才能将文件内容复制到表中 这就是我正在尝试的 this copy
  • Clojure(读取行)不等待输入

    我正在用 Clojure 编写一个文本游戏 我希望玩家在控制台上输入行 然后游戏逐行响应 研究表明 read line 是一种从 Clojure 中的标准输入获取文本行的方式 但它对我不起作用 我在一个新的 Leiningen 项目中 并且
  • Android Visualizer 类抛出运行时异常

    我在演示应用程序中使用 AndroidFX Visualizer 类来读取 FFT 但是当我尝试创建该类的对象时 它会抛出运行时异常 java lang RuntimeException Cannot initialize Visualiz
  • 转换为 int 与下限

    这些之间有什么区别吗 float foo1 int bar 3 0 float foo2 floor bar 3 0 据我了解 这两种情况都有相同的结果 编译后的代码有什么不同吗 转换为 int 将会截断为零 floor 将向负无穷截断 这
  • 在 OpenCV java 中声明 Mat

    如何使用 Java OpenCV 创建和分配 Mat C 版本来自这一页 is Mat C Mat
  • JAVA 用 InetAddress 指定端口

    我正在使用 InetAddress 来确定我的服务器是否在线 如果服务器离线 它将重新启动服务器 此过程每 5 分钟循环一次 以再次检查服务器是否在线 它工作正常 但现在我需要弄清楚如何指定在检查服务器状态时使用端口 43594 而不是默认
  • Netbeans 6.9.1 中的 JAX-RPC 支持

    我正在尝试生成新的 Web 服务客户端 当选择 客户端样式 为 JAX RPC 样式 时 我收到来自 Netbeans 的通知 您必须下载 JAX RPC 支持插件才能创建 JAX RPC 客户端 插件未在可用插件中列出 我搜索了有关此问题
  • ViewModel 使用 Jetpack Compose 触发导航

    在 Android 中 我经常想要导航以响应 ViewModel 的状态更改 例如 成功的身份验证会触发导航到用户的主屏幕 最佳实践是从 ViewModel 内部触发导航吗 是否有有意的机制来触发可组合项中的导航以响应 ViewModel
  • 检测 Paypal 订阅取消

    我编写了一个简单的贝宝订阅系统 用户可以在其中输入他们的信息 单击按钮 然后开始订阅 我想知道如何知道用户何时取消订阅 我已经看到 txn type subscr cancel 但我不知道如何使用它 因为 paypal 不会再次调用我的处理
  • 如何使用cElementTree检索父节点?

    对于 XML
  • 如何在 Emacs 中获取以某个键(组合)开头的命令列表?

    我可以用C h c describe key briefly 并输入一个组合键 它将返回绑定到它的函数 但我也想只输入一个prefix的键组合 并让它列出并描述绑定到以它开头的键序列的所有功能 例如 所有以C x 按组合键 然后按 C h
  • Swing:无法更新 JButton - repaint() 不起作用

    我第一次使用 Swing 来创建一个简单的 GUI 它由一个JFrame我在其上放置了一个JButton单击时 会调用一些其他代码 大约需要花费时间 3秒返回 就在调用此代码之前 在actionPerformed 我想更新按钮上的文本以通知
  • Java 中 fileSystemWatcher 的建议/示例代码

    我正在尝试在 java 中构建一个 fileSystemWatcher 类似于 C 中的 FileSystemWatcher 请建议java是否有任何内置框架功能 或者建议 直接到任何示例 开源项目 查看Apache Commons JCI
  • 获取可用 WiFi 点列表

    我正在创建一个需要互联网连接的应用程序 因此 当 WiFi 设置未启用时 我会弹出一条消息来将其打开 但当它打开时 它不一定连接到 WiFi 接入点 有什么方法可以在列表中显示当前所有可用的 WiFi 点吗 提前致谢 看看下面的方法Wifi
  • Jackson - 如何处理(反序列化)嵌套 JSON?

    vendors vendor id 367 name Kuhn Pollich company id 1 vendor id 374 name Sawayn Hermann company id 1 我有一个 Vendor 对象 可以从单个
  • 为什么此 D3 代码将

    元素添加到正文外部,而不是内部?

    我正在学习 D3 并且在使用选择运算符时遇到了问题 具体来说 为什么下面的代码要添加 p 元素在身体之外 而不是在身体内部 var pData1 d3 select body select p data 1 enter append p 我
  • 如何通过 Spring 将本地 xsd 用于 EhCache

    当我们将 ehcache xml 中的 XSD 文件指向http ehcache org ehcache xsd 一切正常 我们的应用程序可以正确启动 但是我们的服务器无法访问外部网站 因此我们将 XSD 位置更改为本地 如下所示 但应用程
  • Websphere 中的证书链接错误

    我正在尝试从 url 使用 RESTful 服务https someurl com 我在代码中添加了以下属性 Security setProperty ssl SocketFactory provider com ibm jsse2 SSL
  • 无法解析 com.android.support:appcompat-v7:26.1.0 [重复]

    这个问题在这里已经有答案了 升级到 android studio 3 0 gradle 后停止工作 无法解析 app debug compileClasspath 的依赖关系 无法解析com android support appcompa
  • 如何在 Firefox > 108 中设置日期输入日历图标的样式?

    在旧版本的 Firefox 直到 109 中 可以像 Chromium 一样选择日期选择器的图标 input type date webkit calendar picker indicator display none Hides the