html+css实现自定义图片上传按钮

原创已于 2024-10-31 14:41:36 修改 · 546 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

于 2020-10-07 16:10:32 首次发布

未定义专栏收录该内容

22 篇文章

订阅专栏

本文档展示了如何使用HTML和CSS创建一个可定制的图片上传按钮，通过内嵌`<input type=file>`实现选择文件功能，适合前端开发者了解基础交互设计。

直接上代码
效果图
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义图片上传按钮</title>
    <style>
        .btn{
            position: relative;
            display: inline-block;
            width:75px;
            height:25px;
            overflow:hidden;
            text-align:center;
            font-size:14px;
            line-height:25px;
            vertical-align:center;
            border:1px solid #23c6c8;
            color:#333;
            border-radius: 3px;
        }
        .btn:hover{
            border:1px solid #23babc;
            background-color:#23babc;
            color: #fff;
        }
        .btn input{
            position:absolute;
            left: 0;
            top:0;
            opacity:0;
        }
    </style>
</head>
<body>
    <label type="button" class="btn">
        <span>选择图片</span>
        <input type="file">
    </label>

</body>
</html>