Bootstrap美化上传文件按钮

最新推荐文章于 2023-05-13 20:24:02 发布

友人C君~

最新推荐文章于 2023-05-13 20:24:02 发布

阅读量2.6k

点赞数

分类专栏： JavaScript

JavaScript 专栏收录该内容

71 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
	<style type="text/css">
    .fileinput-button {
        position: relative;
        display: inline-block;
        overflow: hidden;
    }

    .fileinput-button input{
        position:absolute;
        right: 0px;
        top: 0px;
        opacity: 0;
        -ms-filter: 'alpha(opacity=0)';
        font-size: 200px;
    }
	</style>

<body>
    <div>
        <span class="btn btn-success fileinput-button">
            <span>上传</span>
            <input type="file">
        </span>
    </div>
</body>
	
	<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" >
	
  <!-- 可选: 包含 jQuery 库 -->
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  
  <!-- 可选: 合并了 Bootstrap JavaScript 插件 -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  
  						
</html>

原文地址：https://www.cnblogs.com/kongxianghai/p/5624785.html

友人C君~

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap美化上传文件按钮

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;script type="text/javascript" src="js/
复制链接

扫一扫