有没有办法在隐藏输入时显示 HTML5 所需的弹出窗口？答案

【问题标题】：Is there a way to display HTML5 required pop-up when hiding the input?有没有办法在隐藏输入时显示 HTML5 所需的弹出窗口？
【发布时间】：2013-04-22 11:17:35
【问题描述】：

我有一个复选框，我通过隐藏输入和定位嵌套在标签中的跨度来设置样式。见http://jsfiddle.net/rz6np/

HTML：

<input id="confirm" type="checkbox" name="confirm" value="1" required="required" />
<label for="confirm"><span>+</span>Confirm</label>

CSS：

    input[type="checkbox"] {
    display: none;
}

form input[type="checkbox"] + label span {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 1px 10px 5px 0;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid grey;
    color: #fff;
    font-size: 15px;
    padding: 2px 2px;
}

input[type="checkbox"]:checked + label span {
    color: #000;
}

由于输入被隐藏，这意味着 html5 required 弹出窗口不显示。有没有办法强制显示？

【问题讨论】：

没有。如果用户看不到它，告诉用户该字段无效有什么好处？弹出窗口是输入元素本身的一部分。
@cimmanon 我已经隐藏了输入，所以我可以设置复选框的样式
所以不要设计它？浏览器不知道您出于“样式”目的而隐藏它，它只知道用户无法访问它，因为它是隐藏的。
@cimmanon 如果这是我的项目，我不会，但这是为客户的设计：\
您可以“隐藏”复选框而不实际隐藏它。例如，jquery-ui 通过width: 1; height: 1; clip: rect(0 0 0 0) 之类的复选框来执行此操作。但是，我不知道这会如何影响弹出窗口。

标签： css html

【解决方案1】：

假设设计看起来像这样或类似于这样，不要使用 display: none。样式复选框足够大以覆盖它，因此只需将其放置在具有相对或绝对位置以及适当 z-index 的复选框上。

如果它不能完全覆盖它，您仍然可以在复选框上使用可见性：隐藏。即使该字段不可见，我仍然会在 Firefox 中看到弹出窗口，但您需要检查其他浏览器以及它们的行为方式。

【讨论】：

【解决方案2】：

input 和 span 应该在标签内：

<label for="confirm">
   <input id="confirm" type="checkbox" name="confirm" value="1" required="required" />
   <span>+</span>
   Confirm
</label>

然后输入：

label {
   position: relative;
}

label > input[type="checkbox"] {
   opacity: 0;
   position: absolute;
   top: 0;
   left: 0;
}

【讨论】：