1. 程式人生 > >檔案上傳html樣式美化

檔案上傳html樣式美化

最近學習jquery file upload外掛,覺得檔案上傳按鈕樣式程式碼可以拿來一用,適當做了些美化。

<div class="fileinput-button">
    圖片選擇<input type="file">
</div> 
<style>
 .fileinput-button {
	 position: relative; 
	 overflow: hidden; 
	 background: #fabe00; 
	 width: 70px; 
	 height: 30px; 
	 color: #fff; 
	 font-size: 14px; 
	 text-align: center; 
	 border: 0; 
	 border-radius: 5%; 
	 line-height: 30px;
 } 
 .fileinput-button:hover { 
	background: #FF8650;
 } 
 .fileinput-button input { 
	 position: absolute; 
	 top: 0; 
	 right: 0; 
	 margin: 0; 
	 opacity: 0; 
	 -ms-filter: 'alpha(opacity=0)'; 
	 font-size: 200px; 
	 direction: ltr; 
	 cursor: pointer; 
 } 
 /* Fixes for IE < 8 */ 
 @media screen\9 { 
 .fileinput-button input { 
	 filter: alpha(opacity=0); 
	 font-size: 100%; 
	 height: 100%; 
 } 
 
 
</style>
順便說下,我遇到的問題:inline-block元素使用overflow: hidden後元素上移。只需加上
 .fileinput-button {
    vertical-align: middle;
 }
效果如圖,好看多了