大家都知道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. 微软build 2015

    1.apple Object-C项目和安卓项目经过移植可以运行在windows上,演示看起来有些卡. 2.平台大统一,Universal Windows App,10亿台设备,这个很重要,以后恐怕离不 ...

  2. HBASE学习笔记--配置信息

    hbase的配置信息,在hbase-site.xml里面有详细说明. 可以按照需要查询相关的配置. <?xml version="1.0"?> <?xml-sty ...

  3. Maven 搭建与my-app项目测试

    前提条件,安装jdk1.6及以上版本,并配置JAVA_HOME 首先,下载Maven3.2.2,附下载地址:http://mirror.bit.edu.cn/apache/maven/maven-3/ ...

  4. iOS判断并使用百度地图 高德地图 导航 (使用URI,不集成sdk)

    [objc] view plaincopy  1. BOOL hasBaiduMap = NO;   2.         BOOL hasGaodeMap = NO;   3.            ...

  5. OC语法3——点语法,self关键字

    点语法:   为了给程序员提供便捷,OC中也引入了点语法.不过它和Java中点语法的意义是完全不同的. 在Java中无论调用任何方法,还是访问public类型的成员变量都是用点语法(.号). 而在OC ...

  6. Storm的数据可靠性(理论)

    Storm的数据可靠性(理论) .note-content {font-family: "Helvetica Neue",Arial,"Hiragino Sans GB& ...

  7. 让2个并列的div根据内容自动保持同等高度js

    有左右2个并列的div,2个div都不能限定高度.左div为导航,右div为内容.如何能让左div块自动获得和右div块相等的高度? 同时,也有网友提问到“如果右块高度比左块低,会不会导致左块的内容被 ...

  8. fputcsv 和 fgetcsv

    public function putcsv(){ $list = M("ad")->limit(0,10)->select(); $fp = fopen('./fil ...

  9. poj 2274 The Race 最小堆

    题目链接 题目大意: 给n个小车, 每个小车有一个初始位置x和初始速度v, 保证x1 < x2..... <xn. 0<v<100. 然后问你一共会发生多少次超车, 以及前10 ...

  10. Case when 的用法,简单Case函数

    Case when 的用法,简单Case函数 简单CASE表达式,使用表达式确定返回值. 语法: CASE search_expression WHEN expression1 THEN result ...