方形多選按鈕是一種常見的UI控件，常用于多項選擇的時候，使用CSS可以輕松地實現這種效果。

/*html代碼*/
<label for="option1">
<input type="checkbox" id="option1" name="options" value="1">
<div class="square">
<div class="checkmark"></div>
</div>
</label>
/*CSS代碼*/
.square {
height: 20px;
width: 20px;
border: 1px solid #999;
display: inline-block;
position: relative;
margin-right: 10px;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
background-color: #333;
display: none;
}
input[type="checkbox"]:checked + .square .checkmark {
display: block;
}

通過HTML代碼中的label標簽和input標簽，我們實現了一個帶有方形多選按鈕的UI控件，CSS中的square類設置了方形的基本樣式。checkmark類設置了勾選狀態的樣式，當復選框處于勾選狀態時（使用:checked偽類），checkmark的display屬性將變為block，從而顯示出勾選狀態。

通過使用CSS，我們能夠輕松地實現各種形狀的多選按鈕，并對其樣式進行自定義。