* {
margin:0;
padding:0;
}
.fileImg {
padding:20px;
background:#ececec;
overflow:hidden;
width:800px;
margin:20px auto;
}
.fileImg ul li {
position:relative;
border:1px solid #c5c5c5;
width:50px;
height:50px;
float:left;
margin-right:50px;
list-style-type:none;
background:#f4f5f7;
border-radius:5px;
}
.fileImg ul li input {
position:absolute;
z-index:3;
top:0;
left:0;
width:100%;
height:100%;
opacity:0;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
.fileImg ul li:after {
position:absolute;
content:' ';
display:block;
width:2px;
height:30px;
background:#cdcdcd;
left:50%;
margin-left:-1px;
top:50%;
margin-top:-15px;
z-index:2;
}
.fileImg ul li:before {
position:absolute;
content:' ';
display:block;
top:50%;
margin-top:-1px;
z-index:2;
width:30px;
height:2px;
background:#cdcdcd;
left:50%;
margin-left:-15px;
}
.fileImg ul li span:nth-child(2) {
display:none;
width:50px;
height:50px;
position:absolute;
left:0;
top:0;
background:#f4f5f7;
cursor:pointer;
border-radius:5px;
overflow:hidden;
z-index:3;
}
.fileImg ul li span:nth-child(2):after {
content:'x';
display:block;
z-index:4;
width:20px;
height:20px;
line-height:16px;
color:#fff;
background:red;
border-radius:50%;
position:absolute;
left:50%;
top:50%;
margin-left:-10px;
margin-top:-10px;
text-align:center;
}
.fileImg ul li span:nth-child(2) img {
width:100%;
position:absolute;
left:0;
top:50%;
}