input中加入圖片的做法
有很多高大上的網站中都有這一做法。尤其是在登入頁面,輸入使用者名稱和密碼時加入小圖示,看起來簡單舒服。
下面就列舉一下我們公司中手機網站應用的截圖:
怎麼樣看起來還不錯吧。下面直接上程式碼:
<!DOCTYPE html>
<html>
<head>
<title>input中加入圖片的做法</title>
<!-- 這裡圖片用的是base64的做法,避免大家在使用我的demo的時候沒有對應的圖示 -->
<style>
.username {width:130px; background:#FFFFFF url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAANfSURBVDhPRZRNaFxlFIa7dSuICzcuXERRKkh37uxGUGNB3KSCUqUIkaItVtDQpqUMlSYWUxo1qaYGbTRg1VItjS6sNGjF1CZVM5m/O/fOvfN77/xl/jPz+H63URcfd7jzneec85733B12pYdd6WCV2uQ2IZarkql2sfwmjt4ni5vE8zWSpQZufYt0uUu80MDTXac6IB0MCCGOgtJ+B682wC63cWs9Kn3wFKR71CEEGFCxA5laX6BWCMpUuQMJK1HmfwHXV2O8dWKCN45EGN77MhMffUpJweZ/U4Xfg5TfDStxKtsQU7ZX6ep0iNp5JqdnmZo5x9iJCC+8sp8HHt7J+zNz+C3YyFZwq32soKfWTHtb/0OygTTx61z9YYmRvc9zbuY9Dh7Yx57hJxgaup+hhx7k99W/yOquLf1M+5mKIEHLQPohxC012ZIOiY01Rp7bzcjwLg68tJtDrz7NY4/cyz1338VP15fJVnthK56EMtUY3f6DOBItXygReFHcP5fI/nGB4to8zsp5jh58lkd33kfctYipJ6sB6750kR5Ouc8O05MdiBx0qNVbFJ11Ujcv00kvEf35DCtLpzk/fYiFL6bJ1sskNMkNTeVvA9FkksE2xPSXE8hxipRyLpcW57i1/C3rK5f55dqXnJka5+J3X1Fod1gvNFWF/NGEeM2ABAlVFiSZq4Xq/3Y7yuznC4ydjDDx4TRjp06y//BhjkxOcSPmEC22SFYGOkouXRIVCWsqSZY7xOsdVssNJr++ym35YP5WmncWf+TYxWvMLUc5+sk3jH+wQGHLeKQpJ9flqS6poHEHkpJHYuUmlqYzevpjTn1/g0vugM9iLWZvlnj3yiqPv/gmb5+9gCNRjTGz0iajpJYvSDidcg9Xfs6VYXktw/jZRfa8dpynRo/zzOsRnhw9RmT+Cr9aNby2xJR9XcWYcduyRggxL9xci3ypR0li5ZXN0QQS+h03fUurlIS09UwqUVz3XE3GK8v20jOEGNeapTLaWHJgWr06mxJOz4TeJZQkITE3tDTGG7bglt8nVVScv202o4lVU1BjgFXXqqtPs7Hmk2CsbT4TZoopk1mVmWOropwq1rC2faJvREK7Y46BesqkPVOWAZniQHsFvtrzFJgsaCLSL4TK/omgzT+uj/fDrpBPrwAAAABJRU5ErkJggg==") 2px 2px no-repeat; padding-left:18px;BORDER: #E7AD01 1px solid; FONT-SIZE: 13px;COLOR: #000000; HEIGHT: 20px }
.password {width:130px; background:#FFFFFF url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAALiSURBVDhPNVNLaxNRGO2fceNKf4AUxIWCuFIKoiAIiig+QN2UVhcGRKsUrNgWpS0+aG1tUWq11lrUim+tpC/TzGQmM5nJcyZJk0wnk8nx3Fu7uDDJd+8533fO+Vp0pwkt34DhhjCLDZjOBoyCx+MjVwG0XAg1EyCe8ZFab/I0kHQ3YJWbSKR9tGiFEIlcgFQJSDp1fnuyKADFY5sgRhHIeqwXA6j5KjI18H4IIx9uAqTKvFRqwiyHUHI1xHlbJ2As08Cq3cBalmAE0csNqK6HNAHUvCdJN0cQXRTqfNSExWKSrMl1XuIj2wcUF1hiwaiSqMJxS3VJZJFYAgj2FIvL6QpUdvF+JYVI/zN09oxiZG4FCi+aHEGlRopT4yj/9RAASaIni+zApYBkXyPY2chd7Nh3FPtPXMGeI5fRO/4JJjuJUwO9EsCusmvHl51LAM0JNgE2gOdfltF6+DQezi0iTtZL3aNobTsHVbTP37FCBUbZh04npAaC3eLMMQqXDoCe8Vls230Qk4s53JuK4vrjj2i7cANxtrua87HmVGF5TdmFQmslgJr3YRIkSn8GZr7iD5HHftnoHHiHmZiP2yPzuPnoNVIkUIoedajKDkyKLAGMEsNBhs9KFg/efIMGIDI8j13HrmLog4G+V1FEBl/CDkUXZdodyCPy06JzdjVbA8EwH0tjcPY3ljhr++Asth84j74ZFR33p9HZOwGNIgsRhY0GnbBptQQQEU6uh1igGLeevsXYQhqnuiews60d14Z/4NDFO+if/C4BhI0CQMTZoAESQMRSdX0YdWBqycbJric43jWGQx1D2HumG+3900iIQJHRrIZYtVxY3InsVgdiB7RSgL/8VmjlMplGf6bxIlqmiB60BlgTFjIHjLMQUHf4P5dQJlGCCDeYh7hDTeiCLiJNLXS6E+diiRSKrIiF2jrinQzSFoBIl1iSRIHz0Rkxq0amRKEmj6jrLneGRybRCfAPXa6W+aBnyAcAAAAASUVORK5CYII=") 2px 2px no-repeat; padding-left:18px;BORDER: #E7AD01 1px solid; FONT-SIZE: 13px; COLOR: #000000;HEIGHT: 20px}
</style>
</head>
<body>
<!-- 做法的原理其實很簡單:
1. 就是給input新增一個背景圖片
2. 背景圖片不要平鋪,設定padding-left的值為背景圖片的寬度
-->
<input class="username" onMouseOver="this.style.borderColor='#99E300'" onMouseOut="this.style.borderColor='#A1BCA3'" maxLength="12" name="UserName">
<input class="password" onMouseOver="this.style.borderColor='#99E300'" onMouseOut="this.style.borderColor='#A1BCA3'" maxLength="12" name="password">
<!-- 濤哥偽專家
歡迎大家關注我的部落格,如有疑問,請加qq群:454796847、135430763 共同進步
-->
</body>
</html>
好了就到這裡吧!歡迎大家關注我的部落格,如有疑問,請加qq群:454796847、135430763 共同進步! 相關文章
- input file圖片上傳
- input file美化 --上傳圖片
- input file上傳圖片預覽
- 為input文字框設定背景圖片
- html input type=file 選擇圖片,圖片預覽 純html js實現圖片預覽HTMLJS
- 如何讓input文字框和圖片對齊
- [CSS]Input標籤與圖片按鈕對齊CSS
- <input>文字框和驗證碼圖片垂直對齊
- Glide中解析圖片(靜態圖片)IDE
- 將input type="file" 型別的圖片檔案轉成base64型別
- 關於Opengl中將24位BMP圖片加入一個alpha通道並實現透明的問題
- 萬彩動畫大師教程 | 給圖片加入不同形狀的蒙版動畫
- bootstrap中如何使input中的小圖示獲得點選事件boot事件
- ci框架中的圖片上傳框架
- Vue中圖片的載入方式Vue
- 網路中的圖片傳輸
- HTML中圖片的蒙朧效果!HTML
- 【JavaScript】拖拽圖片檔案顯示縮圖 + div點選模擬 input[type=file]JavaScript
- input file利用FileReader實現圖片上傳程式碼例項
- html中圖片旋轉HTML
- 有關oracle ebs中:Dialog的做法(1)Oracle
- rman 中的 delete all input 和 delete input 的區別delete
- Android中無法引用drawable中的圖片Android
- python中input()與raw_input()的區別Python
- iOS開發中壓縮圖片的質量以及縮小圖片尺寸iOS
- Overleaf中插入pdf圖片只顯示圖片路徑的解決方式
- 如何抓取canvas畫布中的圖片Canvas
- Delphi儲存網頁中的圖片網頁
- css中圖片的四種地址引用CSS
- 程式碼中修改TextView的DrawableLeft圖片TextView
- Qt中(圖片)資源的使用方式QT
- 利用CSS中input製作開關、輪播圖CSS
- WPS技巧:怎樣在wps工具欄上加入常用圖片?
- jquery 中$("form :input") $("form input") 區別jQueryORM
- vue + 原生input 框上傳多張圖片Vue
- 爬取微博圖片資料存到Mysql中遇到的各種坑mysql儲存圖片爬取微博圖片MySql
- Rman 中的delete input的用法delete
- 本地HTML中圖片下載HTML