html上传按钮无法修改样式-技巧

最新推荐文章于 2022-05-17 23:42:47 发布

原创最新推荐文章于 2022-05-17 23:42:47 发布 · 730 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #js #jQuery

编程教程同时被 2 个专栏收录

1 篇文章

订阅专栏

前端

1 篇文章

订阅专栏

大部分浏览器的上传按钮是无法修改样式的, button标签可以自定义样式

1.把上传按钮隐藏,通过js或者 jQuery脚本点击事件(button)触发上传按钮(input)的事件,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        input{
            display: none;
        }
        #btn{
            background-color: white;
        }
    </style>
</head>
<body>
        <input type="file" value="上传按钮" id="input_file">
        <button id="btn">button标签</button>
</body>
</html>
<script>
        var input_file=document.getElementById("input_file");
        var btn=document.getElementById("btn");
        btn.addEventListener("click", function () {
            input_file.click();
        })
</script>

新人第一次写文章