<input type="file">美化效果程式碼例項
關於<input type="file">這裡就不介紹了,大家應該都不會陌生。
但是它預設的樣式實在是醜陋,難登大雅之堂,下面就分享一段程式碼例項,它實現了對此控制元件的美化效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> .a-upload { padding: 4px 10px; height: 20px; line-height: 20px; position: relative; cursor: pointer; color: #888; background: #fafafa; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; display: inline-block; *display: inline; *zoom: 1 } .a-upload input { position: absolute; font-size: 100px; right: 0; top: 0; opacity: 0; filter: alpha(opacity=0); cursor: pointer } .a-upload:hover { color: #444; background: #eee; border-color: #ccc; text-decoration: none } </style> </head> <body> <a href="javascript:;" class="a-upload"> <input type="file">點選這裡上傳檔案 </a> </body> </html>
相關文章
- 美化滾動條效果程式碼例項
- input type="file"使用
- table表格美化程式碼例項
- jQuery tab選項卡效果程式碼例項jQuery
- canvas載入效果程式碼例項Canvas
- CSS橢圓效果程式碼例項CSS
- <input type="file"> 限制檔案型別型別
- canvas原型鐘錶效果程式碼例項Canvas原型
- css3水滴效果程式碼例項CSSS3
- css背景虛化效果程式碼例項CSS
- canvas氣泡上浮效果程式碼例項Canvas
- <input type="file"> 選中多個檔案
- jQuery點選滑出層效果程式碼例項jQuery
- css3晃動效果程式碼例項CSSS3
- CSS3心形效果程式碼例項CSSS3
- div前後翻轉效果程式碼例項
- 當前文字框高亮效果程式碼例項
- CSS3旋轉效果程式碼例項CSSS3
- 淡入淡出效果簡單程式碼例項
- canvas繪製箭頭效果程式碼例項Canvas
- 使用Input type=file 原生上傳使用總結
- CSS3滑過光束效果程式碼例項CSSS3
- CSS3小黃人效果程式碼例項CSSS3
- css3折角效果程式碼例項CSSS3
- CSS3梯形效果程式碼例項CSSS3
- CSS3背景漸變效果程式碼例項CSSS3
- CSS3星系運動效果程式碼例項CSSS3
- input[type=file]不能選擇同一張圖片
- Android Input子系統-含例項原始碼Android原始碼
- 商品搶購倒數計時效果程式碼例項
- CSS3文字凹凸效果程式碼例項CSSS3
- html實現簡單ListViews效果的例項程式碼HTMLView
- input[type=file] 獲取上傳檔案的內容
- 修改input標籤type=file型別按鈕的值型別
- vue3中清空input type="file"上傳檔案Vue
- CSS3文字陰影效果程式碼例項CSSS3
- jQuery記住使用者名稱和密碼效果程式碼例項jQuery密碼
- dom操作程式碼例項
- css梯形程式碼例項CSS