美化type=file控件
生活随笔
收集整理的這篇文章主要介紹了
美化type=file控件
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
對于type="file"而言是一個不大好看的控件。如果不美化他一下，總感覺自己的網站有些缺乏了美感
上代碼：
?
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>定義input type="file" 的樣式</title> <style type="text/css"> body{ font-size:14px;} input{ vertical-align:middle; margin:0; padding:0} .file-box{ position:relative;width:340px} .txt{ height:22px; border:1px solid #cdcdcd; width:190px;} .btn{ background-color:#FFF; border:1px solid #CDCDCD;height:24px; width:70px; } .file{ position:absolute; top:0; right:80px; height:24px; filter:alpha(opacity:0);opacity: 0;width:260px } </style> </head> <body> <div class="file-box"><form action="" method="post" enctype="multipart/form-data"><input type='text' name='textfield' id='textfield' class='txt' /> <input type='button' class='btn' value='瀏覽...' /><input type="file" name="fileField" class="file" id="fileField" size="28" οnchange="document.getElementById('textfield').value=this.value" /><input type="submit" name="submit" class="btn" value="上傳" /></form> </div> </body> </html>樣式說明：
上面的是用了一個text和一個按鈕去偽裝成了一個type="file"控件；實則控件本身為隱藏狀態；
? ?而怎么實現點擊即點控件，就用到了絕對定位
filter:alpha(opacity:0);opacity: 0; 前者是適合ie8一下的瀏覽器用于過濾用的，后者用現在的很多的瀏覽器。這個值趨近于0基本就是透明狀態了轉載于:https://www.cnblogs.com/yaobolove/p/6044674.html
新人創作打卡挑戰賽發博客就能抽獎！定制產品紅包拿不停！總結
以上是生活随笔為你收集整理的美化type=file控件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： RocketMQ概念整理
- 下一篇： hihocoder 1032 最长回文子