本文將為大家介紹一個 CSS 中表單的案例，可以幫助初學者更好地理解 CSS 表單的應用。

首先，我們來看一下這個表單的結構：

<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br>
<label for="age">年齡:</label>
<input type="number" id="age" name="age"><br>
<label for="gender">性別:</label>
<select name="gender">
<option value="male">男</option>
<option value="female">女</option>
</select><br>
<button type="submit">提交</button>
</form>

接下來，我們將針對每個元素進行樣式設計。

對于標簽，我們首先定義一些公共樣式：

label {
font-weight: bold;
display: inline-block;
width: 4em;
}

這將使所有標簽都有粗體字體，并且最大寬度為 4em。

接下來，我們將針對輸入框進行樣式設計：

input[type="text"],
input[type="number"] {
padding: 0.5em;
border: 1px solid #ccc;
border-radius: 4px;
transition: border-color 0.3s ease-in-out;
}
input[type="text"]:focus,
input[type="number"]:focus {
border-color: #0088cc;
box-shadow: 0 0 5px #0088cc;
}

這里，我們定義了輸入框的填充和邊框半徑，并且使用漸變色過渡來使交互更加順滑。

對于下拉菜單，我們可以使用類似的方法來設計：

select {
padding: 0.5em;
border: 1px solid #ccc;
border-radius: 4px;
transition: border-color 0.3s ease-in-out;
}
select:focus {
border-color: #0088cc;
box-shadow: 0 0 5px #0088cc;
}

最后，我們來設計一下提交按鈕的樣式：

button {
background-color: #0088cc;
color: #fff;
border: none;
border-radius: 4px;
padding: 0.5em 1em;
cursor: pointer;
transition: opacity 0.3s ease-in-out;
}
button:hover {
opacity: 0.9;
}

定義了按鈕的顏色、填充和邊框半徑，并且使用了漸變色過渡和鼠標懸停反饋效果。

好了，一個簡單的 CSS 表單樣式設計就做好了。