input按钮上传按钮样式

╰半夏微凉° 2021-12-17 09:37 462阅读 0赞

主要是定位和不透明度来实现：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            /*a  upload */
            .a-upload {
         
                padding: 4px 10px;
                height: 20px;
                line-height: 20px;
                position: relative;
                cursor: pointer;
                color: #888;
                background: #fafafa;
                border: 1px solid #ddd;
                border-radius: 4px;
                overflow: hidden;
                display: inline-block;
                *display: inline;
                *zoom: 1
            }
    
            .a-upload  input {
         
                position: absolute;
                font-size: 100px;
                right: 0;
                top: 0;
                opacity: 0;
                filter: alpha(opacity=0);
                cursor: pointer
            }
    
            .a-upload:hover {
         
                color: #444;
                background: #eee;
                border-color: #ccc;
                text-decoration: none
            }
    
            .file {
         
                position: relative;
                display: inline-block;
                background: #D0EEFF;
                border: 1px solid #99D3F5;
                border-radius: 4px;
                padding: 4px 12px;
                overflow: hidden;
                color: #1E88C7;
                text-decoration: none;
                text-indent: 0;
                line-height: 20px;
            }
            .file input {
         
                position: absolute;
                font-size: 100px;
                right: 0;
                top: 0;
                opacity: 0;
            }
            .file:hover {
         
                background: #AADFFD;
                border-color: #78C3F3;
                color: #004974;
                text-decoration: none;
            }
        </style>
    </head>
    <body>
    <a href="javascript:;" class="a-upload">
        <input type="file" name="">点击这里上传文件
    </a>
    
    <a href="javascript:;" class="file">选择文件
        <input type="file" name="">
    </a>
    </body>
    </html>

转载于:https://www.cnblogs.com/wang715100018066/p/6061369.html