CSS設定<input>標籤的背景小圖示
很多網站在使用者名稱和密碼輸入的<input>標籤都設定有背景小圖示,非常的美觀。
下面簡單介紹一下如何實現此種效果。
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> ul{list-style:none;} li{height:30px;} input{ width:140px; height:20px; line-height:20px; border:1px solid #0CF; padding-left:20px; } .myname{background:url(mytest/demo/stock_people.png) center left no-repeat;} .mypw{background:url(mytest/demo/security.png) center left no-repeat;} </style> </head> <body> <ul> <li><input type="text" class="myname" name="username" /></li> <li><input type="text" class="mypw" name="password" /></li> </ul> </body> </html>
以上程式碼實現了我們想要的效果,儘管不夠美觀。方法其實很簡單,就是為<input>標籤設定背景圖片。
特別說明:為<input>標籤設定了左內邊距,為了讓輸入的內容不會覆蓋掉小圖示。
相關文章
- 小程式view標籤新增背景圖真機不顯示問題View
- [CSS]Input標籤與圖片按鈕對齊CSS
- 為input文字框設定背景圖片
- CSS設定li列表前小圖示CSS
- 為Html頁面設定背景——通過設定body結構標籤和CSS指定背景屬性實現HTMLCSS
- 微信小程式設定背景圖微信小程式
- QT設定標籤顯示位置QT
- html+css 設定背景圖片HTMLCSS
- CSS設定背景圖片程式碼CSS
- 將input標籤的內容設定為修改觸發操作
- CSS設定背景模糊CSS
- CSS3 設定多個背景圖片CSSS3
- 標籤元件與圖示元件
- input 標籤詳解
- 微信小程式input標籤正則初體驗微信小程式
- css 設定背景顏色CSS
- css設定背景圖片鋪滿固定不動CSS
- type=“file”的input標籤美化
- meta標籤設定
- CSS設定元素的背景顏色CSS
- CSS和canvas標籤設定畫布尺寸區別CSSCanvas
- winphone系統a、input標籤被點選時產生的半透明灰色背景
- 小程式button背景顯示圖片
- css設定背景圖片樣式程式碼例項CSS
- HTML表單中的input標籤HTML
- CSS 設定input文字框樣式CSS
- css設定input文字框樣式CSS
- 一步步打造自己的純CSS單標籤圖示庫CSS
- 好程式設計師分享CSS標籤的分類、及顯示模式程式設計師CSS模式
- JavaScript設定背景圖片JavaScript
- CSS設定背景圖片水平重複和垂直重複CSS
- input標籤autocomplete 屬性
- jQuery如何匹配input標籤的submit元素jQueryMIT
- CSS重置標籤預設樣式CSS
- jsp 介面標籤頁 新增圖示JS
- win10 怎麼設定小圖示_win10如何設定桌面圖示大小Win10
- windows10背景圖怎麼設定_win10設定桌面背景圖的方法WindowsWin10
- (二)Chrome新標籤頁的設定Chrome