文件上傳按鈕的用戶自定義樣式的實現

時間 2019-11-09

標籤文件上傳按鈕用戶自定義樣式實現简体版

原文原文鏈接

通常在作 WEB 開發項目的時候碰到文件上傳必不可少，可是由於各家瀏覽器對於 css

<input type="file"> html

標籤支持不一樣因此在各個瀏覽器下的顯示也是不同的。可能在用戶體驗方面會造成困擾，今天就給你們介紹一下文件上傳按鈕的用戶自定義樣式的實現。 web

實現原理： chrome

創建兩個層，一個層包裝 <input type="file"> 如下簡稱文件按鈕層，一個層包裝上傳文件按鈕的自定義樣式，如下漸層樣式層。設置兩個層的大小一致，將文件按鈕層設置相對定位 position = relative、z-index = 2，將樣式層設置爲絕對定位設置 position=absolute、z-index = 1 而且設置 top left 屬性使之與文件按鈕層重疊。這樣就使大小的同樣的兩個層重疊在了一塊兒，而且文件按鈕層在上面。接下來設置文件按鈕層爲徹底透明，便實現了用戶自定義樣式。瀏覽器

下面給出實現代碼，如下代碼能夠直接拖動至瀏覽器查看效果，建議使用 chrome 瀏覽器。IE 瀏覽器對於 CSS 樣式支持不夠，不可以顯示漸變效果。 ide

代碼： ui

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>hidetypebutton.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
		<!-- 實現 type = "file" 的 input 文件上傳按鈕的自定義樣式-->
		<style type="text/css">
			.user-file-outwrap{width: 100px;height: 30px;overflow: hidden;position: relative;border: 1px solid gainsboro;border: 1px solid rgba(0,0,0,0.1) !important;}
			.user-file-wrap{width: 100%;height: 100%;overflow: hidden;position: relative;z-index: 2;overflow: hidden;}
			.user-file-wrap input{margin: 0 0 0 -2px;padding: 0;width: 100%;height: 100%;opacity: 0;filter: alpha(opacity=0);cursor: pointer;}
			.user-file-bg{
				width: 100%;height: 100%;position: absolute;top: -1px;left: -1px;z-index: 1;text-align: center;font-size: 12px;line-height: 30px;
				background-color: transparent;
				background-image: -moz-linear-gradient(top,rgba(255, 255, 255, .85),rgba(247, 247, 247, .85));
				background-image: -o-linear-gradient(top,rgba(255, 255, 255, .85),rgba(247, 247, 247, .85));
				background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(255, 255, 255, .85)),to(rgba(247, 247, 247, .85)));
				background-image: -webkit-linear-gradient(top,rgba(255, 255, 255, .85),rgba(247, 247, 247, .85));
				background-image: linear-gradient(top,rgba(255, 255, 255, .85),rgba(247, 247, 247, .85));
				border: 1px solid gainsboro;border: 1px solid rgba(0,0,0,0.1) !important;
				color: #444;
			}
			
			
		</style>
  </head>
  
  <body>
  	<div class="user-file-outwrap">
  		<div class="user-file-wrap"><input type="file" class="file"></div>
  		<div class="user-file-bg">點擊上傳</div>
  	</div>
  	<br/>
  	<div><strong>在 IE 瀏覽器下沒有漸變效果而且文件上傳可能須要雙擊才能觸發效果</strong></div>
  </body>
  <input type="file">
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。