Fork me on GitHub

Bootstrap在edge和谷歌浏览器的样式差异

最近在学习Bootstrap时，发现一个有趣的现象

 

 

 

　　有没有发现不同的小伙伴，文件上传和复选框样式在两个浏览器中不一样。为此我特地更新了一下谷歌浏览器，发现还是这样，一顿百度下来，感觉是浏览器之间的差异。然后自己找到一个bootstrap的文件上传控件样式：

　　　　直接使用bootstrap，利用简单的js控制，不需要任何其他的js和css，只需要引入bootstrap和jquery即可

　　

        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <!-- Bootstrap依赖jquery，所以一定要在引入Bootstrap.js之前引入jquery.js -->
            <link rel="stylesheet" th:href="@{/bootstrap-3.3.7-dist/css/bootstrap.css}">
            <script th:src="@{/js/jquery.min.js}"></script>
            <script th:src="@{/bootstrap-3.3.7-dist/js/bootstrap.js}"></script>
        </head>
    

    <body>
        <input id="lefile" type="file" style="display:none">
        <div class="input-append">
            <input id="photoCover" class="input-large" type="text" style="height:30px;">
            <a class="btn btn-success" onclick="$('input[id=lefile]').click();">Browse</a>
        </div>

        <script type="text/javascript">
            $(function () {
    
                $('input[id=lefile]').change(function() {
                    $('#photoCover').val($(this).val());
                });
    
                $("#photoCover").click(function () {
                    $('input[id=lefile]').click();
                })
            })
        </script> 
    </body>

　　更多详情参考：https://blog.csdn.net/my98800/article/details/77732632

 

posted @ 2020-02-10 08:25  威威超酷  阅读(829)  评论(0)    收藏  举报