在網頁開發中，文字方塊是常見的使用者輸入控制項。透過CSS樣式，我們可以對文字方塊進行多樣化的設置，包括顏色、大小、字體、邊框等等。在本篇文章中，將為您詳細介紹如何使用CSS設定文字框，幫助您建立更美觀、實用的網頁。
要設定文字方塊的尺寸，我們可以使用CSS中的width和height屬性。例如，以下程式碼將為文字方塊設定寬度為200像素，高度為30像素：
input[type="text"] {
width: 200px;
height: 30px;
}此外，我們還可以使用CSS的max-width和max-height屬性設定文字方塊的最大尺寸，以保證文字方塊適配不同的螢幕尺寸：
input[type="text"] {
max-width: 100%;
height:30px;
}文字方塊的顏色是我們進行美化的重要因素之一。我們可以使用CSS的background-color屬性來設定文字方塊的背景色，color屬性來設定文字方塊中文字的顏色。例如，以下程式碼將為文字方塊設定背景色為灰色，文字顏色為黑色：
input[type="text"] {
background-color: #ccc;
color: #000;
}與文字方塊的顏色一樣，字體也是文字方塊美化的重要因素之一。我們可以使用CSS的font-family屬性來設定文字方塊中文字的字體，font-size屬性來設定字體的大小。例如，以下程式碼將為文字方塊設定字體為微軟雅黑，字體大小為14pt：
input[type="text"] {
font-family: "Microsoft YaHei",Arial,sans-serif;
font-size: 14pt;
}input[type="text"] {
border: 1px solid #ccc;
}input[type="text"] {
border: 1px solid #ccc;
border-radius: 5px;
}input[type="text"]:focus {
background-color: yellow;
}input[type="text"]:disabled {
background-color: #eee;
color: #ccc;
}input[type="text"] {
width: 200px;
height: 30px;
padding: 5px 10px;
font-family: "Microsoft YaHei", Arial, sans-serif;
font-size: 14pt;
border: 1px solid #ccc;
border-radius: 5px;
}
input[type="text"]:focus {
background-color: #fff;
outline: none;
border-color: #66afe9;
box-shadow: 0 0 0 2px rgba(102, 175, 233, 0.6);
}
input[type="text"]:disabled {
background-color: #eee;
color: #ccc;
}以上是css設定文字框的詳細內容。更多資訊請關注PHP中文網其他相關文章！
