<input type="file">美化效果代碼實例
關于<input type="file">這里就不介紹了，大家應該都不會陌生。
但是它默認的樣式實在是丑陋，難登大雅之堂，下面就分享一段代碼實例，它實現了對此控件的美化效果。
代碼實例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="/" />
<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>
聲明：本文內容由互聯網用戶自發貢獻，該文觀點僅代表作者本人。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容， 請發送郵件至201542412@QQ.com舉報，一經查實，本站將立刻刪除。
相關推薦
-
javascript代碼性能優化簡單介紹
rint(重繪) ，rint發生更改時，元素的外觀被改變，且在沒有改變布局的情況下發生，如改變outlin,visibility,bckground color，不會影響到dom結構渲
-
outerText和innerText屬性的區別實例介紹
在開始文章技術細節的區別介紹之前，先來闡明一個標準上的區別:outrTxt是符合W3C標準的，而innrTxt則是非標準的。下面來先來看一段代碼實例:
-
js prototype屬性使用代碼實例
關于rototy屬性的用法這里不多介紹了，具體可以參閱jvscrit rototy原型一章節。下面就分享一段關于rototy屬性使用的代碼實例，需要的朋友可以做一下參考。代碼如
-
js獲取偽元素選擇器規定的內容代碼實例
關于偽元素選擇器可以參閱CSS bfor/::bfor一章節。下面介紹一下如何利用js獲取偽元素選擇器定義的內容，這種需求在以前可能比較少。但是隨著瀏覽器的進步，偽元素選擇器的實用會越來越廣
-
通過鼠標拖動選取指定數字代碼實例
在不少的應用中，選取數字的時候可以通過鼠標拖動來實現，這樣的效果人性化的很。下面就分享一個插件實現了這樣的功能，這就是jRng，它是利用jQury實現的。一.HTML代碼部分:首先載入jQur
