在Web開發中，表單是必不可少的組件之一。CSS作為網頁樣式設計的重要語言，也可以用來設計表單的item。表單中的item指的是輸入框、復選框、單選框、下拉菜單等可供用戶輸入或選擇的控件。

/* 輸入框樣式 */
input[type=text], input[type=password], textarea {
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 16px;
outline: none;
}
/* 復選框與單選框樣式 */
.checkbox, .radio {
display: inline-block;
position: relative;
padding-left: 25px;
margin-right: 10px;
cursor: pointer;
font-size: 16px;
user-select: none;
}
.checkbox input[type=checkbox], .radio input[type=radio] {
position: absolute;
opacity: 0;
cursor: pointer;
}
.checkbox span, .radio span {
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
border: 1px solid #ccc;
border-radius: 3px;
}
.checkbox span:after, .radio span:after {
content: "";
position: absolute;
display: none;
}
.checkbox input[type=checkbox]:checked + span:after {
display: block;
}
.radio input[type=radio]:checked + span:after {
display: block;
}
.checkbox span:after {
left: 7px;
top: 2px;
width: 6px;
height: 12px;
border: solid #007bff;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
}
.radio span:after {
top: 5px;
left: 5px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #007bff;
}
/* 下拉菜單樣式 */
select {
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 16px;
outline: none;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Cpath d='M15 20l15-20H0z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 10px;
background-position: center right;
cursor: pointer;
}

以上代碼演示了輸入框、復選框、單選框、下拉菜單的樣式設計。其中，輸入框和下拉菜單的樣式較為簡單，主要包括padding、border、border-radius、font-size、outline等屬性。復選框和單選框樣式設計較為復雜，需要通過偽元素:before和:after來實現。通過這種方法，我們可以實現復選框和單選框的選中狀態樣式。

通過CSS樣式設計表單中的item，可以提高網頁的美觀性和交互性，也能夠讓用戶更好地進行交互。通過結合JavaScript，還可以實現表單驗證、數據提交等功能，讓表單更加實用和高效。