文本框(Textbox)是一種常用的表單元素,可以用來輸入或展示單行或多行文本。在網頁設計中,文本框的樣式也是十分重要的。下面我們來看看如何通過CSS來控制文本框的寬度、高度和顏色。
1. 寬度(width)
input[type="text"] { width: 300px; }
上述代碼是通過選擇器選中了所有type為text的input元素(即文本框),并讓它們的寬度為300px。如果要控制特定的文本框,可以通過給該文本框設置一個唯一的id或class,然后使用相應的選擇器來進行控制。
2. 高度(height)
textarea { height: 100px; }
這是通過選擇器選中了所有textarea元素,并將它們的高度設置為100px。同樣,如果要控制特定的文本框的高度,也需要給它設置一個唯一的id或class。
3. 顏色(color)與背景顏色(background-color)
input[type="text"] { color: #333; background-color: #f5f5f5; }
上述代碼是將type為text的所有input元素的文本顏色設置為#333,背景顏色設置為#f5f5f5。同樣,也可以通過設置唯一的id或class來控制特定文本框的顏色。另外,還可以使用border屬性來設置文本框的邊框樣式。
以上就是一些關于文本框CSS樣式的簡單介紹。如果想要更加深入地了解CSS的控制屬性,還需要在實踐中不斷探索。