CSS方形選項對勾按鈕可以為網頁添加簡潔美觀的交互效果，下面我們就來介紹一下如何實現。

input[type="checkbox"] {
/* 隱藏原始的checkbox */
display: none;
}
.checkbox-square {
/* 定義一個容器，用于顯示方形背景和對勾 */
width: 25px;
height: 25px;
border: 1px solid #ccc;
position: relative;
}
.checkbox-square::before {
/* 繪制方形背景 */
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 16px;
height: 16px;
background-color: #fff;
border-radius: 2px;
}
.checkbox-square::after {
/* 繪制對勾 */
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
width: 10px;
height: 10px;
border: 2px solid #fff;
border-top: none;
border-right: none;
transform-origin: bottom right;
}
input[type="checkbox"]:checked + .checkbox-square::after {
/* 當checkbox被選中時，對勾出現 */
transform: translate(-50%, -50%) scale(1);
}

通過定義一個容器和偽元素::before和::after來實現，使用input[type="checkbox"]:checked選擇器來控制對勾出現的狀態。