Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="//at.alicdn.com/t/font_463742_6jzfnp2tkh9kvs4i.css">
</head>
<body>
<div class="upload-pic">
  <i class="iconfont icon-jia1"></i>
  <button>点击添加</button>
  <img src="" alt="">
  <input type="file">
</div>
</body>
</html>
 
button{border:none;outline:none;}
​
.upload-pic{
    position: relative;
    width:70px;
    height:70px;
    border:1px dashed rgb(179,179,179);
    color:rgb(179,179,179);
}
​
.upload-pic>i.iconfont{
   display: block;
    margin:0 auto;
    padding:9% 25% 1% 25%;
    font-size: 35px;
    color:rgb(179,179,179);
}
.upload-pic>button{
    margin:0 7%;
    background:#fff;
    color:rgb(179,179,179);
    font-size:12px;
    
}
.upload-pic>img{
    position: absolute;
    top:0;
    right:0;
    width:70px;
    height:70px;
    z-index:2
}
.upload-pic>input{
    position: absolute;
    top:0;
    right:0;
    width:100%;
    height:100%;
    z-index:3;
    opacity:0;
    filter:alpha(opacity=0);
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x