大家都知道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. JAVA策略模式

    <JAVA与模式>之策略模式 在阎宏博士的<JAVA与模式>一书中开头是这样描述策略(Strategy)模式的: 策略模式属于对象的行为模式.其用意是针对一组算法,将每一个算法 ...

  2. MySql5.6Window超详细安装教程(msi 格式的安装)

    转自:红黑联盟  http://www.2cto.com/database/201506/409821.html 一.安装包准备 1.下载MySql5.6 http://www.mysql.com/ ...

  3. light oj 1027 A Dangerous Maze

    一道数学期望题,唉唉,概率论学的不好啊~~ 求走出迷宫的期望时间. 由于有的门会回到起点,所以有可能会走很多遍,设能走出去的门的个数为n1,总的个数为n,那么一次走出去的概率为n1/n,走一次的用的平 ...

  4. poj 2771 最大独立集

    这道题又无耻的抄袭了别人的代码. 刚开始以为是最大匹配,把条件不相符的人连一起,然后求最大匹配,感觉麻烦,然后看了别人的解题报告,是把相符的人连一起,然后减去,其实就是最大独立集. 最大独立集=|G| ...

  5. leetcode Search in Rotated Sorted Array python

      #Suppose a sorted array is rotated at some pivot unknown to you beforehand. #(i.e., 0 1 2 4 5 6 7  ...

  6. QF——关于iOS的强引用,弱引用及strong,retain,copy,weak,assignd的关系

    强引用和弱引用: 我们已经知道OC中的内存管理是通过“引用计数器”来实现的.一个对象的生命周期取决于它是否还被其他对象引用(是否retainCount=0).但在有些情况下,我们并不希望对象的销毁时间 ...

  7. 区分IE9/IE8/IE7/IE6及其他浏览器-CSS hack

    记录一下这些浏览器的hack如下: 一.IE9以及以下版本浏览器 对于IE8及其以下版本的浏览器,就是使用本文标题所提到的”\9″ hack.如下代码: .ie8_9{ color:blue; /*所 ...

  8. Android 图片平铺效果实现的3种方法

    Html中平铺的效果,那么我们都是怎么样才能实现的那,我们其实主要用到的就是api,我们一开始new一个bitmap,就可以了,那么我们就来说说第二种方法,那就在用到了xml,上面我们说了两个方法,但 ...

  9. IE的事件与w3c事件的区别

    14. offsetWidth, scrollLeft, scrollHeight?     scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollHeig ...

  10. STL容器的内存分配

    这篇文章参考的是侯捷的<STL源码剖析>,所以主要介绍的是SGI STL实现版本,这个版本也是g++自带的版本,另外有J.Plauger实现版本对应的是cl自带的版本,他们都是基于HP实现 ...