zoukankan      html  css  js  c++  java
  • CSS美化 input type=file 兼容各个浏览器(转)

    HTML代码:

        <FORM>
            <A class=btn_addPic href="javascript:void(0);"><SPAN><EM>+</EM>添加图片</SPAN> 
            <INPUT class=filePrew title=支持jpg、jpeg、gif、png格式,文件小于5M tabIndex=3 type=file size=3 name=pic></A>
        </FORM>

    CSS

     *{margin:0;padding:0;} 
    a{text-decoration:none;} 
    .btn_addPic{ 
    display: block; 
    position: relative; 
    width: 140px; 
    height: 39px; 
    overflow: hidden; 
    border: 1px solid #EBEBEB; 
    background: none repeat scroll 0 0 #F3F3F3; 
    color: #999999; 
    cursor: pointer; 
    text-align: center; 
    } 
    .btn_addPic span{display: block;line-height: 39px;} 
    .btn_addPic em { 
    background:url(http://p7.qhimg.com/t014ce592c1a0b2d489.png) 0 0; 
    display: inline-block; 
    width: 18px; 
    height: 18px; 
    overflow: hidden; 
    margin: 10px 5px 10px 0; 
    line-height: 20em; 
    vertical-align: middle; 
    } 
    .btn_addPic:hover em{background-position:-19px 0;} 
    .filePrew { 
    display: block; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 140px; 
    height: 39px; 
    font-size: 100px; /* 增大不同浏览器的可点击区域 */ 
    opacity: 0; /* 实现的关键点 */ 
    filter:alpha(opacity=0);/* 兼容IE */ 
    } 

    显示结果:

    博客内容摘自:http://www.jb51.net/css/69093.html

  • 相关阅读:
    JSON.parse与eval
    加密算法
    asp.net权限管理
    asp.net登录状态验证
    U3D Debug.log的问题
    yield(C# 参考)
    U3D 动态创建Prefab的多个实例
    U3D事件系统总结
    C#事件与接口
    C#泛型委托,匿名方法,匿名类
  • 原文地址:https://www.cnblogs.com/tianma3798/p/6077530.html
Copyright © 2011-2022 走看看