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

Question

我有一个复选框，我通过隐藏输入和定位嵌套在标签中的跨度来设置样式。参见 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 弹出窗口不会显示。有没有办法强制显示？

Answer 1

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

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