在網頁設計和開發中,文字輸入框是常見的元素之一。CSS是一種用于樣式化網頁的語言,可以用它來改變輸入框的樣式和外觀。下面是一些常用的輸入文本框CSS代碼:
/* 將輸入框變得更具吸引力 */ input[type="text"], input[type="password"], textarea { border: 2px solid #ccc; border-radius: 5px; padding: 8px; outline: none; transition: border-color 0.2s ease-in-out; } /* 當懸浮在輸入框上時改變邊框顏色 */ input[type="text"]:hover, input[type="password"]:hover, textarea:hover { border-color: #333; } /* 當輸入框得到焦點時改變邊框顏色 */ input[type="text"]:focus, input[type="password"]:focus, textarea:focus { border-color: #0078D4; } /* 改變輸入框高度 */ textarea { height: 150px; } /* 改變輸入框寬度 */ input[type="text"], input[type="password"], textarea { width: 100%; }
以上代碼可以讓輸入框變得更具吸引力,并提供更好的用戶體驗。開發者可以根據自己的需要來調整和修改這些代碼以達到更好的樣式效果。