主页 / 建站知识 /

css input[type=file] 样式美化(input上传文件样式 )

建站知识 2021-07-03 07:54www.168986.cn长沙网站建设

效果

<!doctype html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>无标题文档</title>  
    <style>  
        /样式1/  
        .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;  
            : 0;  
            opacity: 0;  
            filter: alpha(opacity=0);  
            cursor: pointer  
        }  
        .a-upload:hover {  
            color: #444;  
            background: #eee;  
            border-color: #c;  
            text-decoration: none  
        }  
        /样式2/  
        .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;  
            : 0;  
            opacity: 0;  
        }  
        .file:hover {  
            background: #AADFFD;  
            border-color: #78C3F3;  
            color: #004974;  
            text-decoration: none;  
        }  
    </style>  
</head>  
<body style="padding: 10px">  
<a href="javascript:;" class="a-upload">  
    <input type="file" name="" id="">点击这里上传文件  
</a>  
<a href="javascript:;" class="file">选择文件  
    <input type="file" name="" id="">  
</a>  
</body>  
</html>

以上所述是长沙网络推广给大家介绍的css input[type=file] 样式美化(input上传文件样式 )，希望对大家有所帮助，如果大家有任何疑问请给我留言，长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持！

上一篇：css3 column实现卡片瀑布流布局的示例代码 下一篇：css控制元素高度实现自底向上和自顶向下的方法

长沙网站设计

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by