专栏首页练小习的专栏FF下修改美化文件域(input type=file)的样式

FF下修改美化文件域(input type=file)的样式

有兄弟问我修改美化文件域(input type=file)在FF下的样式,暂时没看兼容.也没美化.等到了上海安定好了再好好修改下

<!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" />

<meta name="keywords" content="程让,练习">

<meta name="description" content="程让个人站">

<style>

input{border:1px solid #ff9900;}

div {width:300px;position:relative;}

p {float:left}

.file {position:absolute;top:20px;right:300px;+top:0;+right:73px;width:0px;height:30px;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;}

#txt {height:20px;margin:1px}

#ii {width:70px;height:24px;margin-top:1px;+margin-top:2px;_margin-top:2px;}

</style>

</head>

<body>

<div>

<form method="post" action="" enctype="multipart/form-data">

<p>

<input type="text" id="txt" name="txt" />

</p>

<p>

<input id="ii" type="button" value="请选择文件" />

</p>

<p>

<input type="file" onchange="txt.value=this.value" class="file" />

</p>

</form>

</div>

</body>

</html>

提示:你可以先修改部分代码再运行。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • js检测图形碰撞笔记

    图形平面碰撞的检测方式就是判断点是否同时在两个对象中。比如这个笔记中的例子 <!DOCTYPE html> <html> <head> <title>i...

    练小习
  • 伪类以及伪元素的一些使用小技巧

    在浏览器版本越来越高的情况下,很多以前顾及到兼容问题不敢使用的html以及css属性现在已经很普遍的在使用了。比如一些伪类和伪元素。这里稍微提一下在实际工作中用...

    练小习
  • 转一个css3绘制的iPhone6

    css3绘制的iPhone6 <!DOCTYPE html> <html> <head> <title></title> <style type...

    练小习
  • WordPress免插件仅代码实现“返回顶部、返回底部、评论”效果(样式一)

    本文所说的”返回顶部、返回底部、评论 “相信你知道是什么东东了吧?  一般你在各大网站的右下角都能看到类似的东东,但许多网站都普遍只有“返回顶部”的效果。不过就...

    Jeff
  • 3D盒子动画

    ---------------------------------------------------------

    py3study
  • 我的markdown样式

    剑行者
  • css3 transition 原

    css3 transition 需要4个参数  transition-property, transition-duration, transition-t...

    tianyawhl
  • CSS3制作心形头像

    1.功能需求: 最近有一个基于微信开发的Mobile Web项目,是一个活动页面。功能需求:用户使用微信扫描二维码,然后授权使用微信登录,然后读取用户的昵称和头...

    八哥
  • js检测图形碰撞笔记

    图形平面碰撞的检测方式就是判断点是否同时在两个对象中。比如这个笔记中的例子 <!DOCTYPE html> <html> <head> <title>i...

    练小习
  • 显示3D文字且左右摆动效果

    图片的进出特效前面介绍过不少,但是没有介绍过文字的特效,今天我来给大家介绍一种特效。相信大家在大街上都看到过店铺的招牌,有的招牌的文字为3D效果,并且后面还能看...

    无邪Z

扫码关注云+社区

领取腾讯云代金券