CSS中的input屬性是一組允許我們控制輸入框的外觀和行為的屬性。
下面是一些常用的input屬性:
input[type=text] { /* 設置輸入框的寬度 */ width: 300px; /* 設置輸入框的高度 */ height: 30px; /* 設置輸入框的邊框 */ border: 1px solid #ccc; /* 設置輸入框的圓角 */ border-radius: 5px; /* 設置輸入框的內邊距 */ padding: 5px; /* 設置輸入框的字體大小 */ font-size: 16px; /* 設置輸入框的字體顏色 */ color: #333; /* 設置輸入框的背景顏色 */ background-color: #fff; } input[type=text]:focus { /* 設置輸入框獲取焦點時的邊框顏色 */ border-color: #00bcd4; /* 設置輸入框獲取焦點時的背景顏色 */ background-color: #f5f5f5; } input[type=text]::placeholder { /* 設置輸入框的占位符顏色 */ color: #ccc; }
上面的代碼演示了如何設置輸入框的樣式和效果。其中,type
是設置輸入框類型的屬性,可以是text
、password
、email
等等。其他屬性包括邊框、圓角、內邊距、字體大小、字體顏色、背景顏色等等。
還有一些更特殊的屬性:
input[type=checkbox] { /* 設置復選框的尺寸 */ width: 20px; height: 20px; } input[type=radio] { /* 設置單選框的尺寸 */ width: 20px; height: 20px; }
上面的代碼演示了如何設置復選框和單選框的尺寸。
最后,還有一個重要的屬性disabled
,它可以禁用輸入框:
input[type=text][disabled] { /* 設置禁用的輸入框的透明度 */ opacity: 0.5; }
上面的代碼演示了如何設置禁用的輸入框的透明度。
總之,CSS中的input屬性可以讓我們輕松地控制輸入框的樣式和行為。我們只需要根據需要選擇相應的屬性進行設置即可。