• input[type="file"] CSS


    1.原理

    基于安全性考虑,IE不支持用程序设置input type=file的值。

    所以不能直接用<input type="text"/>和<input type="button"/>代替,

    CSS美化file组件的方法是使用position属性将file组件置于<input type="text"/>和<input type="button"/>之上,

    然后使其全透明化,操作时使用户感觉在操作<input type="text"/>和<input type="button"/>,实际上还是在操作file组件。 

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>定义input type="file" 的样式</title>
    <style type="text/css">
    .type-file-box {
    position:absolute;
    260px
    }

    input {
    vertical-align:middle;
    margin:0;
    padding:0
    }

    .type-file-text {
    height:22px;
    border:1px solid #cdcdcd;
    180px;
    }

    .type-file-button {
    background-color:#FFF;
    border:1px solid #CDCDCD;
    height:24px;
    70px;
    }

    .type-file-file {
    position:absolute;
    top:0;
    right:0;
    height:24px;
    filter:alpha(opacity:0);
    opacity: 0;
    260px
    }
    </style>
    </head>
    <body>
    <div class="type-file-box">
    <form action="" method="post" name="form1" id="form1">
    <input type='text' name='textfield' id='textfield' class='type-file-text' />
    <input type='button' name='button' id='button' value='浏览...' class='type-file-button' />
    <input name="fileField" type="file" class="type-file-file" id="fileField" size="28" onchange="javascript:document.getElementById('textfield').value=this.value;"/>
    </form>
    </div>
    </body>
    </html>

  • 相关阅读:
    修改FileUpload样式
    ASP.NET 中JSON 的序列化和反序列化
    C# 2.0中泛型编程初级入门
    50条经典爱情观
    (转贴)追MM与Java的23种设计模式
    猴子和香蕉的故事
    35岁前成功的12条黄金法则
    几个小故事
    java与C++的虚函数比较
    flask 源码解析:上下文(一) SUNNEVER
  • 原文地址:https://www.cnblogs.com/mguo/p/3039280.html
Copyright © 2020-2023  润新知