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中看到弹出窗口，即使该字段不可见，但您需要检查其他浏览器以及它们的行为方式。

Answer 2

输入和跨度应在标签内：

<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;
}

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

2 个答案: