zoukankan      html  css  js  c++  java
  • 将选择文件控件改造成自定义样式

    input标签的file控件即选择文件控件貌似不能够很方便的自定义样式,而且部件也不可以灵活定制。

    目前网上通用的方法就是,将原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">
            body{ font-size:14px;}
            input{ vertical-align:middle; margin:0; padding:0}
            .file-box{ position:relative;width:340px}
            .txt{ height:22px; border:1px solid #cdcdcd; width:180px;}
            .btn{ background-color:#FFF; border:1px solid #CDCDCD;height:24px; width:70px;}
            .file{ position:absolute; top:0; left:0; height:24px; opacity: 0;width:260px }
        </style>
    </head>
    <body>
        <div class="file-box">
            <form action="file.ashx" method="post">
                <input type='text' class='txt' id='textfield' />  
                <input type='button' class='btn' value='浏览...' />
                <input type="file" class="file" id="fileField" onchange="document.getElementById('textfield').value=this.value" />
                <input type="submit" name="submit" class="btn" value="上传" />
            </form>
        </div>
    </body>
    </html>

    如果有更好的或者不同的方法,求共享。

  • 相关阅读:
    未来超市 轻松之旅
    超市淡季从竞争对手抓起
    如何监管超市收银漏洞
    一份好的方案需要注意哪些内容?
    超市负库存产生的原因及对策
    成功演示的关键步骤(三)
    成功演示的关键步骤(一)
    js iframe 地址
    js 弹出可拖动窗口
    js 关闭当前页面不提示
  • 原文地址:https://www.cnblogs.com/xwgli/p/3240227.html
Copyright © 2011-2022 走看看