Html
    Css
    Js

    
                        
.div {
	position:relative;
	width:190px;
	height:30px;
	overflow:hidden;
	float:left;
}
button {
	position:absolute;
	right:1px;
	width:70px;
	top:0;
	z-index:5;
	height:26px;
	background:#A6C7FF;
	border:none;
	-webkit-border-top-right-radius:5px;
	-webkit-border-bottom-right-radius:5px;
}
.mo {
	position:absolute;
	left:0;
	height:26px;
	border:1px solid #A6C7FF;
	-webkit-border-top-left-radius:5px;
	-webkit-border-bottom-left-radius:5px;
}
.file {
	position:absolute;
	z-index:10;
	opacity:1;
	height:30px;
	left:-94px;
	top:1px;
	border:0;
	outline:0;
	width:270px;
	padding:1px 30px;
	font-size:12px;
}
.d1 {
	float:left;
	height:30px;
	line-height:30px;
	padding:0 20px;
}
.d1 b {
	font-size:13px;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:2.0.0
 立即下载

css自定义文件图片上传

利用定位属性对元素进行位置的改变,实现简单的文件上传和图片上传功能,几句代码搞定,无需利用一切样式文件

0