如何定位通过HTML5的颜色输入打开的颜色选择器？ [英] How to position a color picker opened through HTML5's color input?

问题描述

今天我看了关于HTML5的颜色输入，我想我会试一试：

Today I read about HTML5's color input and I thought I'd give it a try:

<input type="color" name="background" id="background" value="#ff0000">

当我点击输入（在chrome和firefox中，在Windows上）时，会出现一个颜色选择器。但是，它位于屏幕的左上角，而不是输入的上方。

When I click the input (in chrome and firefox, on windows), a color picker appears. However, it is positioned in the top left corner of my screen, not above the input.

这是一个已知问题，将来会被修复吗？是否可以通过代码定位颜色选择器？或者这是浏览器无法做多少以及用户必须忍受的东西？

Is this a known issue and will this be 'fixed' in the future? Is it possible to position the color picker through code? Or is this something that browsers can't do much about and that users have to live with?

推荐答案

输入类型 color 是特定于浏览器的实现，位于官方文档用户代理（即浏览器）没有给定规则如何定位它在页面的元素上。这样就可以通过CSS进行自定义定位，或者不可能使用JavaScript。

The positioning of the input of type color is browser-specific implementation, in the official documentation there is no given rule for user-agents (i.e. browsers) how to position it over the page's element. This makes custom positioning via CSS for example, or JavaScript not possible.

但是，还有一些其他规则（例如，总是拾取的颜色，并且无法将值设置为空字符串。）

However, there are some other rules (for example, there is always a color picked, and there is no way to set the value to the empty string.)

使用输入时请记住类型为 color ，Internet Explorer和Safari浏览器尚未支持它。

Keep in mind when using the input of type color, that Internet Explorer and Safari browsers do not support it yet.

这篇关于如何定位通过HTML5的颜色输入打开的颜色选择器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！