color类型的input的定位是特定于浏览器的实现，在官方文档中没有给出用户代理（即浏览器）如何将其定位在页面元素上的规则。这使得通过CSS或JavaScript等自定义定位成为不可能。
但是，还有一些其他规则（例如，总是拾取颜色，并且无法将值设置为空字符串）。
请记住，使用color类型的input时，Internet Explorer和Safari浏览器 * 尚不 * 支持它。

我也有同样的问题。我想创建一个主题编辑器，想做到这一点。就像编辑CSS文件时的VS代码一样。我想出了一些解决这个问题的策略：
方法A使用定位的iframe并且用信号通知iframe和父级之间的变化。
1.找出您希望选择器打开的绝对屏幕位置。
1.创建一个〈input type=hidden，其id类似于signalColor，并监视该id的变化。
1.移动一个隐藏的〈div，使其具有绝对位置和大小，并将其移动到需要颜色选择器的位置。在〈div中放置一个iframe，其中包含创建颜色选择器的代码。另外，在iframe中，您需要输入初始颜色。
1.在iframe中设置初始颜色的颜色，然后显示div。
1.使用下面的帖子来确定何时发出新颜色信号或是否取消。https://lugolabs.com/articles/how-to-use-a-color-picker-in-javascript
方法B使用window.open（...）+ AJAX
1.找出您希望选择器打开的绝对屏幕位置。
1.生成随机令牌文件名。
1.打开一个新的窗口，在需要的位置和大小，加载到任何HTML你会需要。嵌入在脚本令牌文件名，并传递 AJAX 凭据你将使用。添加引用到JQuery等。创建一个循环在父DOM中检测窗口何时关闭。
1.当操作员点击新选择时，检测点击并捕获新颜色值。
1.向主机发送一条带有新颜色的 AJAX 消息，并将值保存在令牌文件中。
1.然后关闭窗口，这将触发父进程使用 AJAX 请求令牌文件。

还有一点需要注意的是，在创建自定义选择器控件时，请使用0-size而不是display: none，否则浏览器会将选择器放置在角落（在Visual DOM树之外）。

<input type="color" width="0" height="0" value="#ff0000">

<button onClick="/* logic to show the picker */">Pick a colour</button>

这里有一个破解的解决方案，为我工作.
1.页面加载后（Angular中的"AfterViewInit"），我选择了类型为color的所有输入。
1.其中一个应该是我正在申请的颜色输入，对我来说是第一个。
1.然后，我改变了它的样式属性。
请参见下面的代码：

let colorPickerInputs = document.querySelectorAll('input[type=color]');
if (colorPickerInputs)
  colorPickerInputs[0].setAttribute('style', 'position: absolute; top: 20px; opacity: 0;');