我可以更改Chrome中HTML颜色输入的默认输入格式吗? [英] Can I change the default input format of the HTML color input in Chrome?

问题描述

在Chrome 83中，点击< input type ="color"> 小部件时出现的颜色选择器默认为RGB输入:

In Chrome 83, the color picker that appears upon clicking a <input type="color"> widget defaults to RGB input:

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

The input format can be changed to HSL or HEX by clicking the two little arrows to the right of the letter "B".

是否可以将默认输入格式从RGB更改为HEX，或仅允许十六进制输入?HTML/CSS/JS会是理想的选择，但我想知道是否还有Chrome设置可以对此进行调整.

Is there a way that I can change the default input format from RGB to HEX, or to only allow HEX input? HTML/CSS/JS would be ideal, but I'd be curious if there's even a Chrome setting to adjust this.

推荐答案

否，不可能(截至2020年12月).您可以实现JavaScript并为其提供颜色选择器.

No, it is not possible (as of December 2020). You could implement and provide a color picker with JavaScript.

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

Each browser (or OS combination) will show a default color picker or the OS's color picker.

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 shows a different approach: a range slider with a gradient as background. It does not work in all browsers, but it might fit your requirements.

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

这篇关于我可以更改Chrome中HTML颜色输入的默认输入格式吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！