大家都知道input的type=file控件默认样式是不能修改的

可以通过一个小技巧处理下

html:

<a href="javascript:;" class="go_upload">上传游戏安装包
<input class="upload_input" type="file" value="上传游戏安装包"/>
</a>

css:

.go_upload{
position: relative;
display: inline-block;
background: #3ca4fd;
padding: 13px 103px;
overflow: hidden;
color: #ffffff;
text-decoration: none;
text-indent: 0;
line-height: 20px;
}
.upload_input{
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
}

美化 input type=file控件的更多相关文章

  1. 页面加载完成触发input[type="file"]控件问题

    由于浏览器厂家的限制,不同的浏览器不开放页面加载完成就允许触发input[type="file"]控件 测试 Chrome .火狐 .IE .微信客户端QQ =>桌面端: C ...

  2. input的file 控件及美化

    在一些网站进行上传时,当单击了“浏览”按钮之后会弹出[选择文件]的对话框.想要实现这一功能,用input的file控件来实现就好啦~ <!doctype html> <html la ...

  3. 美化type="file"控件

    对于type="file"而言是一个不大好看的控件.如果不美化他一下,总感觉自己的网站有些缺乏了美感 上代码: <!DOCTYPE html> <html> ...

  4. Jquery给input[type=radio] 控件赋值

    setobject: function (data, scope, win) { //data jsoon数据, scope,一般为form的id,win 窗口对象,如果在当前window win=n ...

  5. CSS美化 input type=file 兼容各个浏览器(转)

    HTML代码: <FORM> <A class=btn_addPic href="javascript:void(0);"><SPAN>< ...

  6. input type=file 标签禁止让用户手动输入

    常规的Web应用程序中涉及到文件上传的部分都不可避免地会使用到<input type="file"/>控件,在上传文件的时候通过点击“浏览”按钮,在弹出的文件选择对话框 ...

  7. INPUT[type=file]的change事件不触发问题

    在网页上要操作文件通常会使用INPUT[type=file]控件,但这个控件的设计很蛋疼.它不像其它编程语言中文件选择后会触发一个事件,只是让上面的文字改变,而这个改变可能会触发change事件而已. ...

  8. 【原创】js中input type=file的一些问题

    1.介绍 在开发中,文件上传必不可少,input[type=file] 是常用的上传标签,但是它长得又丑.浏览的字样不能换,但是他长得到底有多丑呢.我们来看看在不同浏览器里的样子吧. <inpu ...

  9. input[type="file"]的样式以及文件名的显示

    如何美化input[type="file"] 基本思路是: (1)首先在 input 外层套一个 div : (2)将 div 和 input 设置为一样大小(width和heig ...

随机推荐

  1. ASP.NET递归添加树节点

    表设计如图: id        title         parentid 1         asp.net   0 2         c#           0 3         c#_ ...

  2. 制作与使用静态链接库(.lib)文件

    (一)制作.lib文件 (1)打开vs,选择“新建项目”,选择“Visual C++“,选择”Win32 控制台应用程序“. (2)点击”确定“,点击”下一步“,设置如下 (3)点击”完成“,然后就可 ...

  3. 关于scala环境配置详解

    首先从官网下载适合自身电脑配置的scala安装包.scala下载官网网址:http://www.scala-lang.org/download/ 同时scala还有自己集成好的IDE,例如eclips ...

  4. Orchard 源码探索(Log)

    简单工厂模式.抽象工厂模式和适配器模式 依赖倒置原则也叫依赖倒转原则,Dependence Inversion Principle,对抽象进行编程,不要对实现进行编程. A.高层次的模块不应该依赖于低 ...

  5. Python核心编程笔记---- print@2

    print 的输出从定向问题 print 可以用’>>‘来重定向输出,下面是例子 f = open('D:/python.txt','w+') print >> f," ...

  6. Copy an serializable object deeply

    http://www.java2s.com/Tutorial/Java/0100__Class-Definition/Copyanserializableobjectdeeply.htm http:/ ...

  7. N沟道和P沟道MOS FET开关电路

    在电路中常见到使用MOS FET场效应管作为开关管使用.下面举例进行说明. 如图1所示,使用了P沟道的内置二极管的电路,此处二极管的主要作用是续流作用,电路是Li电池充放电电路,当外部电源断开时采用L ...

  8. MyBatis 最常见错误,启动时控制台无限输出日志

    你是否遇到过下面的情况,控制台无限的输出下面的日志: Logging initialized using ‘class org.apache.ibatis.logging.log4j.Log4jImp ...

  9. cocos2d-x创建场景

    今天开始学习Cocos2d-x,使用的版本是2.1.4,这个版本比较老,对应的参考资料也比较齐全. 在mac/xcode环境下,代码是写在Classes文件夹下的,和iOS应用类似,程序从AppDel ...

  10. keep健身计划

    下一个月计划 1keep二周计划 2百度第一期学完 3百度前端技术学院提升