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

最新推荐文章于 2024-10-13 20:17:29 发布

原创最新推荐文章于 2024-10-13 20:17:29 发布 · 927 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#修改intput type='file' 样式

css 同时被 2 个专栏收录

3 篇文章

订阅专栏

intput type='file '

1 篇文章

订阅专栏

本文介绍了一种使用CSS和JSP代码来美化文件上传按钮的方法，通过隐藏默认的文件输入框并用自定义按钮替代，实现了更加友好的用户界面。

老规矩还是先上图：

传统的上传文件样式：

修改之后的样式:

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>

到这里就结束了