CSS的表單樣式對于網頁的美觀和用戶體驗是至關重要的。其中，form同意方塊是表單樣式的一種重要形式。它是一個用于表單組件的方形框框，用于指示用戶同意某些頁面或功能的條款和條件。

.radio-box {
position: relative;
display: inline-block;
margin-right: 10px;
line-height: 1;
}
.radio-box input[type="radio"] {
position: absolute;
left: -9999px;
}
.radio-box label {
position: relative;
display: inline-block;
padding-left: 30px;
cursor: pointer;
color: #353535;
}
.radio-box label:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 18px;
height: 18px;
border: 2px solid #d2d2d2;
background: #f2f2f2;
border-radius: 2px;
box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
transition: all .2s ease;
}
.radio-box input[type="radio"]:checked + label:before {
border-color: #4a90e2;
background: #4a90e2;
}
.radio-box label:after {
content: " ";
position: absolute;
top: 2px;
left: 6px;
width: 6px;
height: 12px;
background: #fff;
opacity: 0;
transform: rotate(45deg);
transition: all .2s ease;
}
.radio-box input[type="radio"]:checked + label:after {
opacity: 1;
}

在這段代碼中，我們使用了一個.radio-box類，這個類可以用于所有原始的單選框控件。我們的樣式將輸入控件隱藏了，并使用了label元素代替了輸入控件，以便可以使用CSS來定義樣式。我們為label元素添加一個 :before 偽元素，并將樣式更改為特定的單選框，這樣可以獲得一個自定義的方框。

要實現這個方框的選擇狀態，我們還需要為元素添加一個選中狀態，這可以通過使用:checked偽類來實現。

細心的讀者可能會注意到我們還使用了一個:after偽類。這個偽類添加了一個小的斜杠，用于指示用戶當前選擇了這個單選框。

最后，這個形式的表單使得用戶可以輕松選擇同意某些條款和條件，以便訪問您網頁的某些區域或功能。