CSS复选框，如何处理需要

我使用这个HTMLCSS复选框，如何处理需要

input[type="checkbox"] { 
 
    display: none; 
 
    width: 30px; 
 
    &+label { 
 
    width: 30px; 
 
    &::before { 
 
     display: inline-block; 
 
     width: 30px; 
 
     height: 26px; 
 
     margin: 0px; 
 
     vertical-align: middle; 
 
     background: url(../images/tick.png) -30px top no-repeat; 
 
     cursor: pointer; 
 
     content: ""; 
 
    } 
 
    } 
 
    &:checked+label::before { 
 
    background: url(../images/tick.png) left top no-repeat; 
 
    } 
 
}

<input required type="checkbox" id="acceptance" name="acceptance" value="yes"><label for="acceptance"></label>

来源

2017-06-22 Chris Pink

不明白你的意思是，表格将不会被提交，除非它被检查 – LGSon

您的意思是如何直观地显示该复选框是必需的？比如放一个红色的星号或类似的东西？ – mikepa88

我需要提供视觉反馈。表单不会提交，但与香草复选框不同，没有HTML5对标签元素的反馈。 –

您正在使用:before显示取决于蜱/交叉的标签图像交换浏览器复选框我自己在复选框:checked设置。用同样的方法:after：

input[type="checkbox"] { 
    &[required] + label:after { 
     content: "*"; 
     color: red; 
    } 
}

来源

2017-06-22 08:59:32

你不需要label。您可以直接将:before元素添加到复选框输入中（确保进行跨浏览器检查，不确定兼容性）。然后

任何HTML5兼容的浏览器将会给弹出说，该元素是必需的：

由于我没有图像，我改变了未核对的颜色为红色，和检查颜色为蓝色：

input[type="checkbox"] { 
 
    width: 30px; 
 
} 
 

 
input[type="checkbox"]::before { 
 
    display: inline-block; 
 
    width: 30px; 
 
    height: 26px; 
 
    margin: 0px; 
 
    vertical-align: middle; 
 
    background: url(../images/tick.png) -30px top no-repeat red; 
 
    cursor: pointer; 
 
    content: ""; 
 
} 
 

 
input[type="checkbox"]:checked::before { 
 
    background: url(../images/tick.png) left top no-repeat blue; 
 
}

<form> 
 
<input required type="checkbox" id="acceptance" name="acceptance" value="yes"> 
 
<input type="submit" /> 
 
</form>

来源

2017-06-22 10:24:06

CSS复选框，如何处理需要

回答

相关问题