在網頁設計中,經常需要輸入文本內容,比如表單輸入框、搜索框、評論區等等。而針對這些輸入的文字,我們可以通過 CSS 的 input 文字樣式進行美化,讓其更符合設計要求。
那么,如何進行 input 文字樣式的設置呢?下面我們通過一些常見樣式的代碼實例進行講解。
/* 1. 去掉默認樣式 */ input { border: none; outline: none; font-size: 16px; } /* 2. 設置邊框樣式 */ input { border: 1px solid #ccc; border-radius: 5px; padding: 10px; } /* 3. 輸入框獲得焦點時高亮 */ input:focus { box-shadow: 0 0 5px #aaa; } /* 4. 設置輸入框文字顏色和背景色 */ input { color: #333; background-color: #f2f2f2; } /* 5. 設置輸入框占位符樣式 */ ::placeholder { color: #aaa; font-size: 14px; } /* 6. 輸入框禁用樣式 */ input[disabled] { background-color: #e6e6e6; color: #999; }
通過以上幾段代碼,我們可以分別實現去掉默認樣式、設置邊框樣式、輸入框獲得焦點時高亮、設置輸入框文字顏色和背景色、設置輸入框占位符樣式以及輸入框禁用樣式等幾種常見的 input 文字樣式。
總的來說,通過 CSS 的 input 文字樣式設置,我們可以更好地掌控網頁的整體設計風格,提高用戶對網頁的良好感受。
上一篇ionic 最新css
下一篇input 在css樣式