zoukankan      html  css  js  c++  java
  • input按钮上传按钮样式

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

    <!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>
  • 相关阅读:
    分布式缓存Redis
    MySQL优化
    SYSRET
    SYSCALL
    bolt cms V3.7.0 xss和远程代码执行漏洞
    github渗透测试工具库
    Gradle系列之Gradle插件
    fastjson 漏洞利用 命令执行
    linux 关闭对端口的监听
    微信小程序自动化测试最佳实践(附 Python 源码)
  • 原文地址:https://www.cnblogs.com/wang715100018066/p/6061369.html
Copyright © 2011-2022 走看看