在前端開發中，表單是不可避免的一部分。而 CSS 可以用來修改表單的外觀和樣式。我們今天就來了解一下如何使用 CSS 修改表單樣式。

首先，我們需要給表單元素選定一個 class 或者 id，這樣我們就可以方便地使用 CSS 來選擇它們。

<form class="my-form">
<label for="username">用戶名:</label>
<input type="text" id="username" name="username">
<label for="password">密碼:</label>
<input type="password" id="password" name="password">
</form>

上面的代碼給表單添加了一個 class 名稱為 "my-form"。這個表單包含了兩個文本框，分別是用戶名和密碼。

下面我們來看一下如何使用 CSS 來修改表單樣式。

/* 選定表單中的文本框 */
.my-form input[type="text"] {
border: 1px solid #ccc;
padding: 5px;
}
/* 選定表單中的密碼框 */
.my-form input[type="password"] {
border: 1px solid #ccc;
padding: 5px;
}
/* 選定表單中的 label 元素 */
.my-form label {
display: block; /* 讓 label 與 input 元素在不同行 */
margin-bottom: 5px; /* 增加垂直間距 */
}

上面的代碼分別修改了文本框、密碼框和 label 元素的外觀樣式。其中，我們給文本框和密碼框設置了邊框和內邊距，而且方法也具有一定的通用性。我們也可以修改表單元素的背景顏色、字體顏色、對齊方式等樣式。

除此之外， CSS 還可以用來修改其他表單元素的樣式，例如單選框、多選框、下拉框等等。我們只需要選定這些元素，然后分別修改它們的樣式即可。

通過使用 CSS 修改表單樣式，我們可以讓表單更加美觀和易用，從而提升用戶體驗。