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伪类。这个伪类添加了一个小的斜杠，用于指示用户当前选择了这个单选框。

最后，这个形式的表单使得用户可以轻松选择同意某些条款和条件，以便访问您网页的某些区域或功能。