zoukankan      html  css  js  c++  java
  • input file的另类做法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>input file的另类做法</title>
    <style type="text/css">
    <!--
    * { font-size:12px}
    body { margin:0}
    .line { position:relative; float:left; padding:8px 0}
    .line span { float:left}
    input { border:1px solid #888; vertical-align:middle}
    .file { position:absolute; left:90px; top:8px; display:none;filter:alpha(opacity=0);opacity:0}
    .file1 { padding:2px 10px; display:block; float:left; background:#FF66CC; color:#fff; z-index:1; margin-left:5px; vertical-align:middle; cursor: pointer}
    .inputstyle { 150px; border:1px solid #888; z-index:99}
    -->
    </style>
    </head>
    <body>
    <div class="line"> <span>
    <label>上传文件:</label>
    <input name="" type="text" id="viewfile" class="inputstyle" />
    </span>
    <label for="unload" onmouseover="document.getElementById('upload').style.display='block';" class="file1">浏览...</label>
    <input type="file" onchange="document.getElementById('viewfile').value=this.value;" class="file" id="upload" />
    </div>
    </body>
    </html>

    前端小菜。。。
    努力成为大菜!
  • 相关阅读:
    实例天天向上的力量
    实例天天向上的力量
    数字类型及操作
    基本数据类型
    函数与模块
    Turtle库(海龟)
    python猛蛇绘制
    输出函数
    循环语句
    集合
  • 原文地址:https://www.cnblogs.com/chengj/p/2003659.html
Copyright © 2011-2022 走看看