文本框是網頁中常用的元素之一，用于放置輸入文本的位置。使用 CSS 可以輕松地改變文本框的外觀和樣式，使其更具吸引力和可讀性。
下面是一個基本的文本框的 CSS 樣式示例，可以根據需要進行修改和定制：
```html
<input type="text" id="myInput">
在這個示例中，我們使用了 `id` 屬性來指定一個唯一的標識符，以便在 CSS 中對其進行訪問和修改。我們還使用了 `type="text"` 屬性來設置輸入框的類型，以文本為輸入內容。
接下來，我們可以使用 CSS 樣式來改變文本框的外觀和布局。以下是一些可能的樣式：
```css
input[type="text"] {
width: 100%;
padding: 10px;
margin: 10px;
border: 1px solid #ccc;
border-radius: 5px;
input[type="text"]:hover {
background-color: #ddd;
input[type="password"] {
width: 100%;
padding: 10px;
margin: 10px;
border: 1px solid #ccc;
border-radius: 5px;
input[type="password"]:hover {
background-color: #555;
input[type="submit"] {
background-color: #4CAF50;
color: #fff;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
input[type="submit"]:hover {
background-color: #3e8e41;
在這個示例中，我們使用了多個樣式來改變文本框的外觀和布局，包括寬度、padding、margin、border、border-radius、背景顏色、鼠標懸停狀態等。這些樣式可以根據需要進行修改和定制。
除了樣式，我們還可以使用 JavaScript 來控制文本框的輸入和提交行為。例如，我們可以使用 JavaScript 對輸入框進行驗證和過濾，以確保輸入內容符合要求。同時，我們也可以使用 JavaScript 來實現一些功能，例如自動填充文本框、清空文本框等。
CSS 樣式是改變文本框外觀和布局的一種有效方法，同時也可以用于實現一些功能。通過使用 CSS 樣式，我們可以輕松地使文本框更具吸引力和可讀性，并且可以實現更多的功能和交互。