Html
    Css
    Js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
.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 {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
↑上面代码改变,会自动显示代码结果 jQuery调用版本:2.0.0
 立即下载

css自定义文件图片上传

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

0