在前端網頁開發中，單選框樣式可以通過CSS進行自定義。其中，長方形單選框是一種比較常見的樣式，下面我們一起來看看如何實現。

/* 定義基礎樣式 */
input[type="radio"] {
display: none; /* 隱藏原單選框 */
}
label {
display: inline-block;
cursor: pointer;
padding: 10px 20px;
margin-right: 10px;
font-size: 16px;
color: #333;
background-color: #fff;
border: 1px solid #333;
border-radius: 4px;
}
/* 單選框選中樣式 */
input[type="radio"]:checked + label {
background-color: #333;
color: #fff;
}

如上代碼所示，我們定義了基礎樣式和選中樣式，并將原單選框隱藏。其中，label標簽中的padding、margin、font-size、color、background-color等屬性均可根據實際需求進行調整。

實際使用時，只需要在HTML中使用input和label標簽組合即可：

<input type="radio" name="option" id="option1" value="1" />
<label for="option1">選項1</label>
<input type="radio" name="option" id="option2" value="2" />
<label for="option2">選項2</label>

注意，input標簽中的name屬性應保持一致，這樣才能實現單選效果，同時label標簽的for屬性要與相應的input標簽的id屬性相同。

以上便是如何實現CSS長方形單選框的介紹，希望能對大家有所幫助。