CSS勾選框代碼用于在網站中添加各種復選框和單選框的樣式。下面是一些常見的CSS勾選框代碼:
/* 基本復選框 */ input[type="checkbox"] { display: none; } input[type="checkbox"] + label { display: inline-block; margin-bottom: 0; } input[type="checkbox"] + label:before { content: ""; display: inline-block; margin-right: 5px; width: 15px; height: 15px; border: 1px solid #bbb; vertical-align: middle; background-color: #fff; } input[type="checkbox"]:checked + label:before { content: "\2713"; color: #fff; background-color: #666; border-color: #666; } /* 基本單選框 */ input[type="radio"] { display: none; } input[type="radio"] + label { display: inline-block; margin-bottom: 0; } input[type="radio"] + label:before { content: ""; display: inline-block; margin-right: 5px; width: 15px; height: 15px; border: 1px solid #bbb; border-radius: 100%; vertical-align: middle; background-color: #fff; } input[type="radio"]:checked + label:before { content: ""; background-color: #666; }
上述代碼分別包括基本復選框和基本單選框的代碼。它們的共同點是,當勾選時,復選框和單選框中的勾選標志將變成實心勾選框。
為了使用這些CSS勾選框代碼,你只需將代碼添加到CSS文件中,并將HTML中的input標簽的type屬性設置為checkbox或radio。此外,你還可以根據自己的需求進行調整,例如更改勾選框的大小、顏色和樣式等。
上一篇css北極圖片