在HTML中,文本輸入框是一個常用的元素,它允許用戶在網頁上輸入文本信息。在CSS中,我們可以使用一些屬性和偽類來美化這些文本輸入框。下面,我們來看一些常用的CSS樣式。
/* 設置文本框的寬度和高度 */ input[type=text], textarea { width: 300px; height: 100px; } /* 設置文本框的背景顏色和邊框樣式 */ input[type=text], textarea { background-color: #f2f2f2; border: 1px solid #ccc; } /* 設置文本框的圓角 */ input[type=text], textarea { border-radius: 5px; } /* 設置文本框的陰影效果 */ input[type=text], textarea { box-shadow: 0 0 5px rgba(0,0,0,0.1); } /* 設置文本框得到焦點時的樣式 */ input[type=text]:focus, textarea:focus { border-color: #4da6ff; box-shadow: 0 0 5px rgba(77, 166, 255, 0.5); } /* 設置文本框禁用時的樣式 */ input[type=text][disabled], textarea[disabled] { background-color: #e6e6e6; border-color: #ccc; }
除了上述常用的CSS樣式,還有一些額外的屬性也可以用于文本輸入框,例如文本框中的文字對齊方式、字體大小和顏色等。我們可以根據實際需求來進行選擇和定制化。
總之,在設計網頁時,文本輸入框的樣式可以起到很好的美化效果,為用戶提供更好的體驗。
下一篇文本行居中css樣式