CSS 選中表單的樣式

隨著 Web 開發的不斷普及，表單的使用也越來越廣泛。表單是 Web 應用程序中的重要組成部分，用戶可以在其中填寫信息并提交表單。為了確保表單的可讀性和可用性，使用 CSS 可以輕松地定義表單的樣式。

以下是一個簡單的示例，展示如何使用 CSS 選擇器來選中表單中的某個單元格：

HTML 代碼：

<form>

<label for="name">姓名：</label>

<input type="text" id="name" name="name">

<button type="submit">提交</button>

</form>

CSS 代碼：

form {

display: flex;

flex-direction: column;

align-items: center;

label {

margin-bottom: 10px;

input[type="text"],

input[type="password"] {

padding: 10px;

border: 1px solid #ccc;

border-radius: 5px;

box-sizing: border-box;

input[type="submit"] {

background-color: #4CAF50;

color: white;

padding: 10px 20px;

border: none;

border-radius: 5px;

cursor: pointer;

input[type="submit"]:hover {

background-color: #3e8e41;

在上面的示例中，我們使用 CSS 選擇器來選中表單中的文本輸入框。我們定義了一個 `form` 元素，并將其設置為 `display: flex;`。這使得表單中的所有元素都按照行排列。我們還定義了一個 `label` 元素，并將其設置為 `margin-bottom: 10px;`，以使單元格易于看到。我們還定義了一個 `input` 元素，并將其設置為 `padding: 10px;` 和 `border: 1px solid #ccc;`。最后，我們定義了一個 `input[type="submit"]` 元素，并將其設置為 `background-color: #4CAF50;`、`color: white;`、`padding: 10px 20px;` 和 `border: none;`。當用戶點擊提交按鈕時，我們將 `input[type="submit"]:hover` 的 background-color 設置為 `#3e8e41`，以使鼠標懸停在輸入框時的背景顏色更鮮明。

這只是一個簡單的示例，實際應用中，您可能需要根據表單的具體情況調整樣式。例如，您可能需要為輸入框添加背景顏色、邊框、圓角等樣式。此外，您還可以使用 CSS 選擇器來控制表單中所有元素的布局、字體大小、顏色等。通過使用 CSS，您可以輕松地創建漂亮的表單，并使其易于使用。