我有一个复选框,通过隐藏输入并定位嵌套在标签中的跨度来进行样式设置。参见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
弹出窗口。有没有办法强迫它显示?
假设设计看起来像这样或类似,请不要使用display:无。样式化的复选框足够大以覆盖它,因此只需将其放置在具有相对或绝对位置以及适当的z-index的复选框上方即可。
如果无法完全覆盖它,您仍然可以使用可见性:隐藏在复选框中。即使该字段不可见,我仍会在Firefox中看到弹出窗口,但是您需要检查其他浏览器及其行为。
输入和范围应在标签内:
<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;
}