CSS樣式可以用來美化網頁的表現形式，而正方形勾選框是其中一種實用的樣式。當我們需要在網頁中添加多項選擇時，使用正方形勾選框可以更加方便和美觀。下面將會介紹如何創建一個CSS樣式正方形勾選框并應用于網頁中。

/*CSS樣式*/
.checkbox {
width: 20px;
height: 20px;
border: 1px solid black;
margin-right: 10px;
display: inline-block;
position: relative;
}
.checkbox input[type="checkbox"] {
opacity: 0;
position: absolute;
top: 0; 
left: 0;
bottom: 0;
right: 0;
cursor:pointer;
}
.checkbox:before {
content: "";
display:none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
width: 60%;
height: 30%;
border: 2px solid white;
border-top: none;
border-right: none;
}
.checkbox input[type="checkbox"]:checked:before {
display: block;
}

首先，我們需要在CSS樣式中定義一個class為“checkbox”的樣式，這個樣式會設置它所代表的勾選框的基本形狀，包括寬度、高度、邊框和相對于別的元素的位置等。在勾選框的內部，我們還需要創建一個input類型為checkbox的元素，并將它設為透明以便讓用戶進行勾選操作。當勾選框被選中時，我們會在這個元素前面插入一個偽元素：before，通過這個偽元素來創建一個白色的勾選符號，來表示用戶已經選擇了這一項。

當然，整個樣式還需要根據實際情況來進行調整。比如，我們可以改變勾選符號的大小、粗細、顏色等等，來適應不同的網頁需求。

最后，我們在網頁中應用這個樣式只需要將目標元素設置為一個class為“checkbox”的div即可。

選項A

在這個例子中，我們將這個勾選框放在一個label標簽內，并與一個id為“choice”的輸入框進行了關聯。在用戶選中勾選框時，對應的輸入框就會變為選中狀態。通過這種方法，我們可以很方便地使用CSS樣式創建簡單實用的網頁元素，提高網頁設計的效率和美觀度。