大家都知道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. v​s​快​捷​键

    Ctrl+E,D ----格式化全部代码 Ctrl+A+K+FCtrl+E,F ----格式化选中的代码 Ctrl+K+FCTRL + SHIFT + B生成解决方案 Alt+B+B 或 F6 生成当 ...

  2. mantis 中文统计报表乱码问题解决办法

    mantis 中文报表乱码问题 1.安装mantisTB 1.2.17:a.安装插件:管理-->插件管理-->安装MantisGraph(Mantis图表 1.0) 插件b.修改配置文件: ...

  3. echarts如何做出堆积图总计的效果

    首先说下,我这这数据是假数据,实际是公司做图的一部分数据自己修改了下下,不涉及泄密什么的. 第一.echarts本身是没有这个在柱子上面加total的这点大家默认下就好了,因为我不是什么前端专职程序员 ...

  4. 物理引擎简介——Cocos2d-x学习历程(十三)

    Box2D引擎简介 Box2D是与Cocos2d-x一起发布的一套开源物理引擎,也是Cocos2d-x游戏需要使用物理引擎时的首选.二者同样提供C++开发接口,所使用的坐标系也一致,因此Box2D与C ...

  5. (转)详解汇编系统调用过程(以printf为例)

    本文以printf为例,详细解析一个简单的printf调用里头,系统究竟做了什么,各寄存器究竟如何变化. 环境: linux + gnu as assembler + ld linker 如何在汇编调 ...

  6. OpenCV学习(3)--Mat矩阵的操作

    CvMat的矩阵结构 typedef struct CvMat { //矩阵中元素的类型 int type; //行数据长度 int step; /* for internal use only */ ...

  7. hadoop笔记之Hive的数据存储(分区表)

    Hive的数据存储(分区表) Hive的数据存储(分区表) 分区表 Partition对应于数据库的Partition列的密集索引 在Hive中,表中的一个Partition对应于表下的一个目录,所有 ...

  8. Android studio libs目录

    Android studio libs目录: 关于Android studio libs目录,Android studio 已经为我们自动生成了,如果默认 是看不到默认Libs目录的,点击红色按钮地方 ...

  9. struts2笔记08-初识ActionSupport

    1.配置一个最简单的action <action name="simple-action"> <result>/simple.jsp</result& ...

  10. c/c++:内存泄露和野指针的概念

    内存泄漏 用动态存储分配函数动态开辟的空间,在使用完毕后未释放,结果导致一直占据该内存单元.直到程序结束.即所谓内存泄漏.    注意:内存泄漏是指堆内存的泄漏. 简单的说就是申请了一块内存空间,使用 ...