仿照Bootstrap的input 修改 upload上传图片的样式

html:

1
2
3
4
5
6
7
8
9
10
<div class="form-group">
    <label class="col-sm-3 col-sm-6 control-label">图片</label>
    <span class="problem-must"> </span>
    <div class="col-sm-8">
        <a class="fb-upload" href="javascript:void(0);"
            <input class="form-control" name="pic" type="file" accept=".gif,.jpg,.png,.jpeg" /> 
            <span class="fb-img">上传图片</span>
    </a>
    </div>
</div>

css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.form-group input[type="file"] {
    cursorpointer;
    opacity: 0;
    positionabsolute;
    top0;
}
.fb-img {
    border1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0000.075inset;
    colorgray;
    display: inline-block;
    height34px;
    line-height1.42857;
    padding6px 12px;
    text-alignleft;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    width100%;
}



本文转自 爱笑嘚蛋蛋 51CTO博客,原文链接:http://blog.51cto.com/dd118/1868944,如需转载请自行联系原作者
上一篇:SharePoint 2013 Designer系列之自定义列表表单


下一篇:[软件发布]可媲美EndNote的文献管理软件与论文写作辅助软件--RefNavigator