1. 程式人生 > >Bootstrao美化上傳檔案按鈕

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