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複選框，如何處理需要

回答

相關問題