代码之家 › 专栏 › 技术社区 › Danield

打开带有显示的颜色输入:无通过标签(webkit)

html-input webkit html css

Danield · 技术社区 · 10 年前

我想隐藏一个 input 元素,并使用关联的 label .

通常这不是问题。我可以简单地设置 display:none 在输入端 like this

input {
  display: none;
}

<input id="upload" type="file" />
<label for="upload">Upload a file</label>

出于某种原因 在Chrome中 (Firefox有效),此技术不适用于 彩色输入 - DEMO

输入{
显示:无;
}

<input id="colorPick" type="color" />
<label for="colorPick">Pick a color</label>

这是一个webkit bug吗?或者这不起作用有逻辑原因吗?

1 回复 | 直到 10 年前

Naeem Shaikh 10 年前

我想这是一个bug,对于chrome(不太确定其他浏览器)。您可以针对这种特定情况找到解决方法: http://jsfiddle.net/z1ta7ou0/4/

而不是使用

input {
  display: none;
}

使用

input {
   visibility :hidden;
    width:0px;
padding:0;
margin:0;
}

似乎只有 display:none 这会导致问题(标签没有关联),否则工作正常。

我还打开了一个问题 here ,你可以跟踪它

推荐文章

Mr.Floppy · 仅在Mac上的Chrome上键入时,输入字段变小(可能是CSS网格问题)

7 年前

1234ru · HTML输入忽略flex basis CSS属性[重复]

7 年前

Ido Naveh · 使用JavaScript向表中添加新行时重置输入字段

7 年前

Ruslan · 输入是否必须在表单内才能使自动完成工作?

8 年前

Micaiah Wallace · 未触发更改时的jQuery文件输入

9 年前

John Dawson · 将HTML表单输入中的日期格式设置为仅YYYY

10 年前

Danield · 打开带有显示的颜色输入:无通过标签(webkit)

10 年前

Josh Mc · accept属性中的值需要计算机知道mime类型吗?

12 年前