zoukankan      html  css  js  c++  java
  • input类型为file改变默认按钮样式

    改变 input file 样式(input  文件域)是很多前端朋友经常遇到的头疼问题,今天推荐两种改变 input file 样式的两种常用方法:

    方法一:
    
    <input type="text" size="20" name="upfile" id="upfile" style="border:1px dotted #ccc">  
    <input type="button" value="浏览" onclick="path.click()" style="border:1px solid #ccc;background:#fff">  
    <input type="file" id="path" style="display:none" onchange="upfile.value=this.value">
    也可以写成这样:
    
    <style type="text/css">
    <!--
    #input1{border:1px solid #0000FF}
    #btn1{width:70px;height:21px;font-size:12px;padding-top:3px; background:url(83.gif) no-repeat; height:22px; border:0;}
    //-->
    </style>
    <body><input type="text" id="input1">
    <input name="button" type="button" id="btn1" onclick="myfile.click();" value="浏览文档" />
    <input type="file" id="myfile" onchange="input1.value=this.value" style="display:none">
    </body>
    方法二:
    
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <meta http-equiv="content-type" content="application/xhtml+xml; charset=gb2312" />
    <meta http-equiv="content-language" content="zh-cn" />
    <meta name="robots" content="all" />
    <meta name="keywords" content="关键字描述" />
    <meta name="description" content="站点描述" />
    <meta name="author" content="我们,we@126.com" />
    <meta name="copyright" content="版权所有" />
    
    
    <title>css+js定义input的file浏览按钮样式兼容FireFox</title>
    <style type="text/css">
    <!--
    *{ margin:0; padding:0; border:0;}
    body{font:12px/130% verdana,geneva,arial,helvetica,sans-serif,宋体; padding:20px;}li{list-style:none;}
    .clearfix:after{content:"&nbsp;";display:block;height:0;clear:both;visibility:hidden;}.clearfix{*display:inline-block;}
    
    
    .text{ border:1px solid #999;height:16px; width:300px; font-family:verdana; font-size:12px;padding-top:2px; float:left;margin-right: 5px;}
    .file{ width:67px;overflow:hidden; background:url(83.gif); height:22px; *vertical-align:3px; overflow:hidden; float:left;}
    #file{ width:0; height:20px;margin-left: -154px;*margin-left:-3px; filter:alpha(opacity=0);-moz-opacity:.0;opacity:0.0; cursor:pointer;}
    -->
    </style>
    </head>
    <body>
    <input type="text" class="text" id="text"/>
    <span class="file"><input id="file" type="file" /></span>
    <script type="text/javascript">
    <!--
    var file = document.getElementById("file");
    var text = document.getElementById("text");
    file.onchange = type;
    function type()
    {text.value = file.value;}
    -->
    </script>
    </body>
    </html>
  • 相关阅读:
    HDOJ1269 迷宫城堡
    最长公共子序列 nyoj36
    HDU1081 To The Max 求子矩阵最大和
    nyoj20 吝啬的国度
    景观分析工具:arcgis中patch analysis模块
    景观格局动态变化分析方法(基于ArcGIS、Fragstats、ENVI、ERDAS、Patch Analysis for ArcGIS) (20110315 08:07:03)
    从C#到Python —— 谈谈我学习Python一周来的体会
    如何判定多边形是顺时针还是逆时针
    超新星与暗能量的发现--今年诺贝尔物理奖工作的介绍(转)
    怎样把扫描好的身份证打印出实际大小
  • 原文地址:https://www.cnblogs.com/wei-dong/p/6212179.html
Copyright © 2011-2022 走看看