CSS3選項框列表是一種常用的界面元素,通過CSS3技術,我們可以創建具有美觀效果和交互性的選項框列表。
/* CSS3選項框通用樣式 */ .input-checkbox { position: relative; display: inline-block; cursor: pointer; padding-left: 25px; margin-right: 20px; font-size: 16px; line-height: 1.5; user-select: none; } /* 模擬選項框 */ .input-checkbox::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border: 1px solid #aaa; background-color: #fff; } /* 選項框勾選狀態 */ .input-checkbox input:checked + ::before { content: "\2713"; /* unicode碼,表示勾號 */ color: #fff; background-color: #3b8cff; border: none; } /* 選項框實現方式 */ <label class="input-checkbox"> <input type="checkbox" name="option1" value="1"> <span>選項1</span> </label>
上述代碼實現了一個簡單的CSS3選項框,根據需要進行修改即可。此外,我們還可以通過CSS3實現更多的選項框效果,比如半選中狀態、鎖定狀態等。