在 HTML 中，設(shè)置評論表單組件的文本輸入框和提交按鈕樣式是構(gòu)建交互式網(wǎng)站的重要部分。通過巧妙地運用 CSS（層疊樣式表），我們可以為這些表單元素賦予獨特的外觀和交互效果，提升用戶體驗。

一、文本輸入框樣式設(shè)置

1. 基本樣式

- 在 HTML 中，文本輸入框使用 `` 標(biāo)簽創(chuàng)建。要設(shè)置其基本樣式，我們可以在 CSS 中使用 `input[type="text"]` 選擇器。例如，設(shè)置寬度為 300 像素、邊框為 1 像素實線黑色、背景顏色為白色、內(nèi)邊距為 10 像素等：

```css

input[type="text"] {

width: 300px;

border: 1px solid black;

background-color: white;

padding: 10px;

}

```

2. 圓角和邊框半徑

- 為了使文本輸入框看起來更柔和，我們可以添加圓角效果。通過設(shè)置 `border-radius` 屬性來控制圓角的半徑：

```css

input[type="text"] {

border-radius: 5px;

}

```

3. 占位符樣式

- 占位符文本用于提示用戶在輸入框中應(yīng)輸入的內(nèi)容。我們可以使用 `::placeholder` 偽元素來設(shè)置占位符的樣式，如顏色、字體大小等：

```css

input[type="text"]::placeholder {

color: gray;

font-size: 14px;

}

```

4. 焦點樣式

- 當(dāng)用戶點擊輸入框并使其獲得焦點時，我們可以為其添加不同的樣式，如邊框顏色變深等。使用 `:focus` 偽類來實現(xiàn)：

```css

input[type="text"]:focus {

border-color: blue;

}

```

二、提交按鈕樣式設(shè)置

1. 基本樣式

- 提交按鈕使用 `` 標(biāo)簽創(chuàng)建。同樣，在 CSS 中使用 `input[type="submit"]` 選擇器來設(shè)置其樣式。例如，設(shè)置寬度為 150 像素、背景顏色為藍(lán)色、顏色為白色、邊框為 1 像素實線黑色、內(nèi)邊距為 10 像素等：

```css

input[type="submit"] {

width: 150px;

background-color: blue;

color: white;

border: 1px solid black;

padding: 10px;

}

```

2. 鼠標(biāo)懸停效果

- 當(dāng)用戶將鼠標(biāo)懸停在提交按鈕上時，我們可以為其添加不同的樣式，如背景顏色變亮等，以提供反饋：

```css

input[type="submit"]:hover {

background-color: darkblue;

}

```

3. 圓角和邊框半徑

- 與文本輸入框類似，我們可以為提交按鈕添加圓角效果，使其更具吸引力：

```css

input[type="submit"] {

border-radius: 5px;

}

```

三、綜合應(yīng)用與布局

在實際的網(wǎng)站設(shè)計中，我們通常會將文本輸入框和提交按鈕放置在一個表單中，并使用 CSS 布局來控制它們的位置和間距。例如，使用 `display: flex` 來創(chuàng)建一個彈性布局，使它們水平排列：

```css

.form-container {

display: flex;

}

input[type="text"],

input[type="submit"] {

margin-right: 10px;

}

```

通過以上的 CSS 樣式設(shè)置，我們可以輕松地自定義 HTML 中評論表單組件的文本輸入框和提交按鈕的外觀。這不僅可以使表單與網(wǎng)站的整體設(shè)計風(fēng)格相匹配，還可以提高用戶的交互體驗，讓用戶更愿意參與到評論和互動中。同時，我們還可以根據(jù)具體的需求進(jìn)一步擴(kuò)展和調(diào)整樣式，以滿足不同的設(shè)計要求。

HTML 和 CSS 的結(jié)合為我們提供了豐富的工具來創(chuàng)建美觀、交互性強(qiáng)的評論表單組件。通過合理地設(shè)置文本輸入框和提交按鈕的樣式，我們可以為網(wǎng)站增添更多的魅力和功能。