對于復選框和單選框樣式的修改，可以使用CSS和JavaScript來自定義復選框（checkbox）和單選框（radio）的樣式。以下是一些示例代碼，展示如何實現自定義樣式：

首先設置隱藏默認的復選框和單選框：
input[type="checkbox"],
input[type="radio"] {
  display: none;
}
HTML結構：

/* 定義自定義復選框的樣式 */
.custom-checkbox-label {
   display: inline-block;
   width: 20px;
   height: 20px;
   background-color: #ccc;
   border: 2px solid #333;
   cursor: pointer;
}
/* 定義選中狀態下的樣式 */
input[type="checkbox"]:checked + .custom-checkbox-label {
   background-color: #3498db;
   border-color: #3498db;
}
/* 定義自定義單選框的樣式 */
.custom-radio-label {
   display: inline-block;
   width: 20px;
   height: 20px;
   background-color: #ccc;
   border: 2px solid #333;
   border-radius: 50%; /* 圓形單選框 */
   cursor: pointer;
}
/* 定義選中狀態下的樣式 */
input[type="radio"]:checked + .custom-radio-label {
   background-color: #3498db;
   border-color: #3498db;
}
自定義復選框（Checkbox）和單選框（Radio）的樣式，都是創建自定義的標簽元素（<label>），并為其定義了樣式。當復選框或者單選框被選中時，通過使用相鄰兄弟選擇器（+）來改變自定義樣式。不過單選框需要具有相同的name屬性，以確保它們屬于同一組。
還可以使用 JavaScript 來自定義復選框（checkbox）和單選框（radio）的樣式，如下所示：
HTML結構：

JS如下：

這段代碼使用了 JavaScript 來添加事件監聽器，當復選框或單選框的狀態改變時，會根據是否選中來添加或移除checked類名。 CSS 樣式中的.checked類名用于設置選中狀態的樣式。可以根據需要修改樣式的顏色、大小和其他屬性來達到想要的效果。上述是一個簡單的示例，可以根據自己的需求進一步自定義樣式和動畫效果，以實現更復雜的復選框和單選框樣式。