修改传统上传文件<intput type=“file” name=“test”> 样式

最新推荐文章于 2024-06-22 16:08:54 发布

叫我阿龙啊

最新推荐文章于 2024-06-22 16:08:54 发布

阅读量876

点赞数

分类专栏： intput type='file ' css 文章标签：修改intput type='file' 样式

本文链接：https://blog.csdn.net/nicholas_long/article/details/82884921

版权

css 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

intput type='file '

1 篇文章 0 订阅

订阅专栏

老规矩还是先上图：

传统的上传文件样式：

修改之后的样式:

css样式：

label{
    position: relative;
}
#pic1,#pic2,#pic3{
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}
#btn1,#btn2,#btn3{
    padding: 5px 5px;
    background: #00b0f0;
    color: #FFF;
    border: none;
    border-radius: 5px;
}

jsp 代码：

<form method="post" id="uploadForms3" enctype="multipart/form-data">
    <div id="span_3">
        <label for="pic1">
            <input type="button" id="btn3" value="上传其他证件" style="width: 100px;">
            <input type="file" id="pic3" onchange="doUpload(3)" name="pic">
        </label>
    </div>
</form>

到这里就结束了