HTML中的復選框可以通過CSS定制樣式,其中包括打鉤形狀。
/*自定義 checkboxes*/ input[type="checkbox"] { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } /*將復選框替換為圓形*/ .checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; border-radius: 50%; } /*當復選框被選中時,添加打鉤*/ input[type="checkbox"]:checked ~ .checkmark:after { content: ""; position: absolute; display: block; top: 50%; left: 50%; width: 12px; height: 12px; border-radius: 50%; border: solid white; border-width: 0 2px 2px 0; transform: translate(-50%, -50%) rotate(45deg); }
以上代碼將原本的方形框替換成了圓形框,并添加了打鉤樣式,可以通過修改樣式屬性改變打鉤形狀、顏色。
上一篇css中文手冊打不開
下一篇css中按鈕向下移