Bootstrao美化上传文件按钮

<!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/[email protected]/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/[email protected]/dist/js/bootstrap.min.js"></script>
  
  						
</html>

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

猜你喜欢

转载自blog.csdn.net/CWH0908/article/details/85108605