大家都知道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. CAD各版本注册表

    AutoCAD 2010 HKEY_LOCAL_MACHINE\SOFTWARE\Autodesk\AutoCAD\R18.0\ACAD-8001:804 AutoCAD 2010 (32) HKEY ...

  2. 排序算法 -- 数据结构与算法的javascript描述 第12章

    排序是常见的功能,给定一组数据,对其进行排序. 在此之前,我们需要准备个基础工作--自动生成数组,并可以对该组数据做任何处理. /** * 测试类 ,数组 * @param numElements * ...

  3. CentOS添加中科大、163 yum源

    首先备份CentOS-Base.repo [root@richard yum.repos.d]# mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos ...

  4. 定时器——Cocos2d-x学习历程(十一)

    1.定时器 利用场景.层和精灵等游戏元素,我们可以构建游戏的框架,但是此时的游戏仍然是静止不动的.在一切游戏中,游戏的状态都会随着时间的流逝而改变,同时我们还需要定时进行一些逻辑判断,例如鱼和子弹的碰 ...

  5. Invalid signature file digest for Manifest main attributes

    Solving a Spark error: Invalid signature file digest for Manifest main attributes When using spark-s ...

  6. Storm基础理论

    Storm流式计算基础 .note-content {font-family: "Helvetica Neue",Arial,"Hiragino Sans GB" ...

  7. CreateFileMapping共享内存时添加Global的作用

    来源:http://www.cnblogs.com/elvislogs/articles/ShareMemory.html 通常使用CreateFileMapping建立共享内存时名称中没有加入&qu ...

  8. 软件测试学习日志———— round 2 Junit+intellj idea 安装及简单的测试使用

    今天是软件测试的上机,主要内容是对junit的安装以及对一个简单类的测试实践.老师推荐用eclipse,但是我原来一直在 用intellj Idea,所以我试了试intellj Idea对junit的 ...

  9. tr删除替换详解

    tr(translate缩写)主要用于删除文件中的控制字符,或进行字符转换. 语法:tr  [–c/d/s/t] [SET1] [SET2]    #SET1: 字符集1: SET2:字符集2 -c: ...

  10. hdu 5652 India and China Origins 二分+bfs

    题目链接 给一个图, 由01组成, 1不能走. 给q个操作, 每个操作将一个点变为1, 问至少多少个操作之后, 图的上方和下方不联通. 二分操作, 然后bfs判联通就好了. #include < ...