HTML学习笔记之一（input文件选择框的封装）

标签：html   file   

方式一：直接透明隐藏

	        .file_button_container,.file_button_container input {background: transparent url(./img/BT5AB.png) left top no-repeat;height: 47px;width: 263px;}

	       .file_button_container {background: transparent url(./img/BT5AB.png) left top no-repeat;}
	       .file_button_container input {opacity: 0;}

<div class="file_button_container"><input type="file" /></div>

方式二：覆盖隐藏 js调用

.styled-button {
				background-color:#25A6E1;color:#fff;font-family:'Helvetica Neue',sans-serif;
				font-size:14px;	line-height:30px;border-radius:20px;-webkit-border-radius:20px;
				-moz-border-radius:20px;border:0;width:120px;height:32px
		    }

function chooseFile() {
		      $("#fileInput").click();
		   }

<div style="height:0px;overflow:hidden">
		   <input type="file" id="fileInput" name="fileInput" />
		</div>
		<button type="button" class="styled-button" onclick="chooseFile();">上传图片</button>

你可以点击这里获得你想要的按钮样式代码

HTML学习笔记之一（input文件选择框的封装）

标签：html   file   

原文地址：http://blog.csdn.net/wujiangwei567/article/details/46334633