我可以更改 Chrome 中 HTML 颜色输入的默认输入格式吗?

2024-05-09

在 Chrome 83 中,单击<input type="color">小部件默认为 RGB 输入:

通过单击字母“B”右侧的两个小箭头,可以将输入格式更改为 HSL 或 HEX。

有没有办法可以将默认输入格式从 RGB 更改为 HEX,或者只允许 HEX 输入? HTML/CSS/JS 是理想的选择,但我很好奇是否有 Chrome 设置来调整它。


不,这是不可能的(截至 2020 年 12 月)。您可以使用 JavaScript 实现并提供颜色选择器。

每个浏览器(或操作系统组合)都会显示默认颜色选择器或操作系统的颜色选择器。

https://collectiveidea.com/blog/archives/2011/09/14/hsl-color-selector-using-html5-and-css https://collectiveidea.com/blog/archives/2011/09/14/hsl-color-selector-using-html5-and-css显示了一种不同的方法:以渐变作为背景的范围滑块。它并不适用于所有浏览器,但它可能适合您的要求。

.spectrum {
  display: block;
  width: 150px;
  height: 15px;
  margin: 0 0 -3px 7px;
  background: -webkit-linear-gradient(left, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%) 100%);
}

input[type=range] {
  width: 161px;
  margin-top: -5px;
}
<span class="spectrum"></span>
<input type="range" min="0" max="300" step="1">
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

我可以更改 Chrome 中 HTML 颜色输入的默认输入格式吗? 的相关文章

  • Chrome --app 相当于 Firefox\IE

    我有一个网络应用程序 客户要求单击不同按钮时更改浏览器窗口大小 我发现在那link https stackoverflow com questions 13436855 launch google chrome from the comma
  • 如何更改 HTML 文档的“实际编码”?

    我通过 W3C HTML 验证器运行我的网页并收到此错误 编码ascii不是字符的首选名称 使用中的编码 首选名称是 us ascii Charmod C024 第 5 行 第 70 列 内部编码声明 utf 8 不同意 文档的实际编码 u
  • 使用flex-basis控制行上显示的项目数

    我想在使用 Flex 时将元素推出以隐藏它们 例如 如果flex basis为 50 仅显示两个项目弯曲到给定空间 而其他元素则在overflow hidden 领土 Or if flex basis为 25 则仅显示 4 个 Flex 元
  • 我自己的而不是从其他网站借用的图像的正确 img src 是什么?

    在我的计算机上 保存 css 和 html 文件的文件夹还包含一些我想要插入到 html 中的图像 如果我从其他网站借用图像 我知道如何获取图像的 URL 如何获取文件夹中但尚未出现在互联网上的图像的 URL 我是否必须将图像上传到其他网站
  • 将 html 文本框的值分配给 div 的标题

    line 1
  • 使用变量显示文本的 HTML

    我正在 HTML 中创建一个复选框 如下所示
  • 提升变焦不起作用

    我正在使用带有苹果风格幻灯片画廊的提升缩放功能 一切正常 然而 缩放功能会放大被滑块隐藏的隐藏图像 直到单击缩略图时它们变得可见 启动缩放插件的原始代码是 zoom 01 elevateZoom 我从其他问题中得到了下面的 JavaScri
  • Chrome 中的 V8 原生语法

    Nodejs 有特殊标志 allow natives syntax 是否可以将这样的东西传递给 Google Chrome 或者也许开发工具提供了其他方式来访问此类信息 running node with allow natives syn
  • 使用 z-index 的链接在 Firefox 和 IE 中无法单击,即使它位于顶部

    我试图让文本链接出现在部分透明图像的顶部 而该图像又位于纯色背景的顶部 我希望在打印页面时打印链接文本和图像 但不打印彩色背景 这就是为什么我不使用背景图财产 问题在于 虽然链接显示在图像顶部 并且图像按需要显示在背景顶部 但无法单击该链接
  • Wkhtmltopdf 每页右侧的垂直文本

    下面是使用 wkhtmltopdf 生成的 PDF 示例 我需要在每一页的右书脊上生成文本 我尝试将其添加到标题代码中 似乎会剪辑 PDF 的正文 我正在使用 wkhtmltopdf 的页眉和页脚参数 不太确定如何或是否可以在每个页面的右侧
  • engine.io 与 socket.io 有何不同?

    LearnBoost 似乎有一个新项目叫做引擎 io https github com LearnBoost engine io理论上似乎与socket io 类似 1 在什么情况下您会使用其中一种而不是另一种 2 对于需要通过node j
  • CSS3 - 性能最佳实践是什么? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 推荐的 HTML 格式化程序脚本/实用程序? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 开放式 WebSocket 连接存在哪些安全问题?

    我正在构建一个使用 websockets 的应用程序 我只允许经过身份验证的用户在登录并被授予会话 ID 后打开与服务器的 Websocket 连接 一旦我与经过身份验证的用户打开了 Websocket 连接 当前 页面 就会保存打开的 W
  • Angular/ HTML5 到 iOS WKWebView 通信

    我们正在尝试看看发送信号的最佳选择是什么To iOS WKWebView fromAngular 6 HTML5 项目 任何示例都会很棒 我们想要做的是 我们在 Angular 网页上有一个按钮 单击该按钮应该通知 iOS 执行某些操作 我
  • 获取输入图像类型选择的图片并加载到图像标签中

    所以 我有一个用于上传 img 文件的输入框 我想要做的是从该数据 或选定的源 中获取数据并将其路由到图像标签的 src 属性中 像这样的东西 http jsfiddle net QC2c4 http jsfiddle net QC2c4
  • 保存下拉列表中的值

    这是我的情况 我有 2 页 一页用于选择值 一页用于编辑与该值关联的数据库相关内容 现在 我对如何将从下拉列表中选择的值保存到 PHP 的变量中一无所知 并且已经进行了相当多的研究 有任何想法吗 HTML
  • Python 模块 BeautifulSoup 提取锚点 href

    我正在使用 BeautifulSoup 模块通过以下方式从 html 选择所有 href def extract links html soup BeautifulSoup html anchors soup findAll a print
  • 将可点击的锚标记转换为 html 文档中的纯文本

    我正在尝试匹配 a 我的内容中的标签 并将其替换为链接文本 后跟打印版本的方括号中的 url 如果只有 href 则以下示例有效 如果 a 包含另一个属性 它匹配太多并且不会返回所需的结果 我怎样才能匹配 URL 和链接文本 就是这样 这是
  • 将 div 附加到另一个 div 的右侧

    我有一个 div 它就像一个容器 里面有 2 个图像 一张图像位于 div 的左侧 另一张图像位于右侧 我的容器是Bootstrap的容器 它们都用 div 包裹 并且div s position is fixed 我的问题是我无法找到要附

随机推荐

  • 使用另一个数组中的值转换所有数组键

    我有很多数组 是从 csv 文件生成的 在所有数组中 第一个数组对象是 csv 标题 请参阅下面的示例 总之 第一个数组的值 即 key 0 和 value report date 应替换所有后续数组的所有键 因此 对除第一个数组之外的所有
  • WifiConfiguration 在 Lollipop 中启用网络

    我正在研究 Wifi 项目 有一个模块可以让用户以编程方式加入 wifi 在 kitkat 及以下版本中它可以成功工作 但在 Lollipop 中它不起作用 这是代码 WifiManager wifiManager WifiManager
  • 升级到 Xubuntu 14.04 后 Aptana 崩溃

    我已经使用 Aptana 多年了 并且已经习惯了它的许多功能 直到我从 Ubuntu 13 04 升级到 14 04 为止 它一直很可靠 现在每隔 5 分钟左右就会崩溃一次 我无法完成工作 没有出现错误 屏幕只是消失 每次重新启动时 我都必
  • 两个非嵌套循环的大 O 表示法

    对于两个非嵌套的 for 循环 大 O 表示法是什么 Example for int i 0 i
  • 启动画面反应本机后出现白屏

    编辑 似乎是因为 MainActivity 加载太重而生成白屏 我设法首先使用本机启动屏幕来解决 然后在本机被杀死后立即基于下一个插件的 js 实现 我做了一些修改完美匹配两个启动画面https github com crazycodebo
  • 代码签名证书选项

    我被分配了为我的公司购买数字证书来签署我们的代码的任务 我们在 Microsoft 领域开发应用程序 主要是 WPF 或基于 Web 我调查了选项 发现 Comodo 价格合理且反应灵敏 我们准备继续通过它们购买证书 但是在注册表单中有各种
  • jquery 求所有div子元素的总高度

    嘿 我有一个 div 其中包含 5 个 div 我想将它们所有的高度加在一起 这是我根据杰夫的回答最终使用的解决方案 谢谢你的协助 var ev totalHeight 0 events gt div each function ev to
  • 非集群主键实体框架代码优先

    在实体框架代码优先方法中 我们是否可以将主键定义为非聚集索引 并将其他几个字段的组合定义为聚集索引 Thanks EF 6 2 解决了这个问题 目前 它处于测试状态 但它可以工作 首先 将 EF 升级到 6 2 Install Packag
  • 在上下文中模拟计时,以使用 auto_now_add=True 的字段 DateTimeField 创建模型

    我想模拟时间以便能够set特定时间到某个类型的字段DateTimeField with auto now add True在我的测试期间 例如 class MyModel created at models DateTimeField au
  • Parcelable 写入可序列化对象 getactivity() 时遇到 IOException

    所以我在 logcat 中得到了这个 java lang RuntimeException Parcelable encountered IOException writing serializable object name com re
  • 如何在Python中创建二维码而不将其另存为图像?

    我正在尝试使用以下代码在 Django 应用程序上使用 Python 制作二维码 def generate qr code reference qr qrcode QRCode version 1 error correction qrco
  • Lockfree 标准集合和教程或文章

    有人知道用于无锁常用数据类型的实现 即源代码 的好资源吗 我正在考虑列表 队列等 锁定实现非常容易找到 但我找不到无锁算法的示例以及 CAS 的工作原理以及如何使用它来实现这些结构 查看 Julian M Bucknall 的博客 他 详细
  • Xcode 10 命令行构建:存档失败,出现 Fabric Info.plist 错误

    我有用于自动构建 iOS 项目的 Jenkins 服务器 该项目有两个目标 使用命令行实用程序构建项目xcodebuild 完整命令是 usr bin xcodebuild workspace Our project xcworkspace
  • 未找到类型:'(架构,http://www.w3.org/2001/XMLSchema,)

    我正在使用 suds client 来提供肥皂 wsdl 服务 当我尝试为肥皂服务设置肥皂水客户端时 我收到 类型未找到 错误 我到处寻找 有许多未解答的问题具有相同的错误 我将链接添加为问题1 https stackoverflow co
  • 这个 Java 语法是什么意思? [复制]

    这个问题在这里已经有答案了 可能的重复 java中的是什么意思 https stackoverflow com questions 12649572 what does the type in java mean 在下面的代码中 Itera
  • 使用 Sentinels 升级 Redis 的最佳实践?

    我有 3 个 Redis 节点 由 3 个哨兵监视 我进行了搜索 文档似乎不清楚如何最好地升级此类配置 我目前使用的是 3 0 6 版本 我想升级到最新的 5 0 5 我对这方面的程序有几个疑问 升级两个大版本可以吗 我在我们的暂存环境中执
  • 如何在 mysql 或 JDBC 的表中自动插入外键引用?

    我正在使用MySQL 我的问题是如何自动将新添加的行插入外键表中 一个例子可以澄清我的问题 我有两个表 员工 和 薪水 CREATE TABLE Employee emp id int NOT NULL AUTO INCREMENT nam
  • 在没有窗口的情况下从 C# 运行命令行并获取输出[重复]

    这个问题在这里已经有答案了 我正在尝试从 C 运行命令行脚本 我希望它在没有 shell 的情况下运行并将输出放入我的字符串输出中 它不喜欢 p StartInfo 行 我究竟做错了什么 我没有运行像 p StartInfo FileNam
  • 暂停和恢复过渡

    我在用setInterval 因此转换会在一定时间间隔后发生 是否可以使用 setInterval 暂停和恢复工作 任何正确方向的建议 指示都会非常有帮助 这个问题是在 D3 v3 是最新版本时发布的 5年后D3 v5有了一些新方法 比如s
  • 我可以更改 Chrome 中 HTML 颜色输入的默认输入格式吗?

    在 Chrome 83 中 单击