CSS自定義復選框切換是一種常見的交互效果,可以提升網站用戶體驗。下面介紹如何使用CSS自定義復選框切換功能。
/* HTML結構 */ <label class="checkbox"> <input type="checkbox" name="checkbox" class="checkbox-input"> <span class="checkbox-icon"></span> 復選框 </label> /* CSS樣式 */ .checkbox { display: inline-flex; align-items: center; } .checkbox-input { position: absolute; width: 0; height: 0; opacity: 0; } .checkbox-icon { display: inline-block; width: 16px; height: 16px; border: 1px solid #999; border-radius: 2px; margin-right: 4px; vertical-align: middle; cursor: pointer; } .checkbox-input:checked+.checkbox-icon { background-color: #333; }
以上代碼通過創建一個標簽包含一個input和一個span元素,使用input的:checked狀態來判斷選中或者不選中,并設置不同的樣式。同時,改變checkbox-icon的背景色實現選中狀態。
自定義復選框切換功能可以應用于表格中多選框的實現,也可以應用于表單的多選項。CSS自定義復選框切換功能的實現可以在不使用JavaScript的情況下,為用戶提供便捷的操作體驗。
上一篇php subrrpos
下一篇css自定義圓形邊框