上传文件按钮美化示例

最新推荐文章于 2021-02-05 15:23:41 发布

dengba6306

最新推荐文章于 2021-02-05 15:23:41 发布

阅读量402

点赞数

文章标签： php java

原文链接：http://www.cnblogs.com/lbzbky/p/11028945.html

版权

input file上传按钮的美化思路是，先把之前的按钮透明度opacity设置为0,然后，外层用a标签或其他标签包裹，就实现了美化功能
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .a-upload {
            position: relative;
            display: inline-block;
            height: 30px;
            line-height: 30px;
            background-color: darkblue;
            color: white;
            text-decoration: none;
            border-radius: 20%;
            border: 1px solid #ddd;
            overflow: hidden;
            padding: 0 10px;
            margin: 10px;
        }
        .a-upload input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            filter: alpha(opacity=0);
            right: 0;
        }
    </style>
</head>
<body>
<form enctype="multipart/form-data">
    <a href="javascript:" class="a-upload">
        <input type="file" name="" id="">上传
    </a>
</form>
</body>
</html>