[k]自定义上传文件按钮样式
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>input type=file 样式自定义</title> <style> .a_wrap{ height:20px;padding:5px 10px;overflow:hidden; /*盒模型*/ background:#eee;border:1px solid #ddd;color:#333;border-radius:5px;text-decoration:none; /*伪上传按钮样式*/ position:relative; /*父元素定位*/ display:inline-block; /*必要*/ } .a_wrap #upload{ font-size:100px; /*撑开上传按钮*/ position:absolute;top:0;right:0; /*子元素定位*/ opacity:0;filter:alpha(opacity=0); /*实际的上传按钮隐藏*/ } .a_wrap:hover{ /*悬浮样式*/ text-decoration:underline; border:1px solid #aaa; } </style> </head> <body> <h2>input type=file 样式自定义</h2> <form action=""> <a href="javascript:;" class="a_wrap"> <input type="file" name="upload" id="upload">点击这里上传文件 </a> </form> <div style="margin-top:30px"><strong>总结:</strong>兼容到IE7+,Firefox,Chrome</div> </body> </html>
[k]自定义上传文件按钮样式的更多相关文章
- 怎样用纯HTML和CSS更改默认的上传文件按钮样式
如果你曾经试过,你就会知道,用纯CSS样式加HTML实现统一的上传文件按钮可能会很麻烦.看看下面的不同浏览器的截图.很明显的,他们长得很不一样. 我们的目标是创造一个简洁,用纯CSS实现的,在所有浏览 ...
- bootstrap改变上传文件按钮样式,并显示已上传文件名
参考博文: html中,文件上传时使用的<input type="file">的样式自定义 html中<input type="file"&g ...
- html中自定义上传文件的样式
<script> $(function(){ $("#avatsel1").click(function(){ $("input[type='file']&q ...
- el-upload自定义上传文件,并携带其余参数,且action不报错
用el-upload组件自定义上传按钮,并携带其余参数,且必传参数action 不报错 <template> <el-col :span="6" :mode=&q ...
- jQuery上传文件按钮美化
效果图如下: 思路: 1:打开文件设置为透明,外面包一层标签,给标签设置颜色背景,给人点击浏览其实是点击打开文件的错觉.(给外标签相对定位,打开文件标签绝对定位). 2:点击浏览后,选择了文件,就把文 ...
- 使用jQuery.FileUpload插件和服Backload组件自定义上传文件夹
在零配置情况下,文件的上传文件夹是根目录下的Files文件夹,如何自定义文件的上传文件夹呢? □ 在web.config中配置 1: <configuration> 2: <conf ...
- MVC文件上传05-使用客户端jQuery-File-Upload插件和服务端Backload组件自定义上传文件夹
在零配置情况下,文件的上传文件夹是根目录下的Files文件夹,如何自定义文件的上传文件夹呢? MVC文件上传相关兄弟篇: MVC文件上传01-使用jquery异步上传并客户端验证类型和大小 MVC文 ...
- WebUploader 上传插件结合bootstrap的模态框使用时选择上传文件按钮无效问题的解决方法
由于种种原因(工作忙,要锻炼健身,要看书,要学习其他兴趣爱好,谈恋爱等),博客已经好久没有更新,为这个内心一直感觉很愧疚,今天开始决定继续更新博客,每周至少一篇,最多不限篇幅. 今天说一下,下午在工作 ...
- php版本CKFinder3.4.4自定义上传文件位置
1.修改文件上传路径: 编辑ckfinder目录下config.php,70行设置为: 'baseUrl' => '/uploads/'.date('Ymd').'/'; 这样上 ...
随机推荐
- 数据库操作事务IsolationLevel 枚举
成员名称 说明 Chaos 无法覆盖隔离级别更高的事务中的挂起的更改. ReadCommitted 在正在读取数据时保持共享锁,以避免脏读,但是在事务结束之前可以更改数据,从而导致不可重复 ...
- border opacity
div { border: 1px solid rgb(127, 0, 0); border: 1px solid rgba(255, 0, 0, .5); -webkit-background-cl ...
- nginx 日志切割
#!/usr/bin/python #-*-coding:UTF-8-*- import time import os logdir='/data/log/nginx' nginxpath='XX/l ...
- kafka环境搭建及librdkafka测试
kafka环境搭建及librdkafka测试 (2016-04-05 10:18:25) 一.kafka环境搭建(转自http://kafka.apache.org/documentation.h ...
- Apache ab参数--压力测试
Apache附带的ab,它非常容易使用,ab可以直接在Web服务器本地发起测试请求.这至关重要,因为我们希望测试的服务器的处理时间,而不包含数据的网络传输时间以及用户PC本地的计算时间. 需要清楚的是 ...
- display : -webkit-box-inline 我见
发现: 最近在做移动端的东西,说起移动端弹性盒子布局真是无往不利,用起来特别爽,我也是偶尔间发现的这个属性并且它的用法,在网上基本查不到这个属性的资料(个人看法).如果没有听说过(display:bo ...
- 分词工具ICTCLAS5.0使用心得
接触自然语言处理有一年多了,最基本的一些自然是分词,词性标注,命名实体识别之类的知识,有些应用知道原理是一回事,自己动手做起来又是另外一回事了.最近又开始重操旧业:分词.分词最著名的自然就是中科院的分 ...
- rational rose 顺序图的消息加数字
主菜单——〉“Tools”——〉“Options”,在弹出的窗口中选择“Diagram”标签-->display-->sequence numbering
- ktouch移动端事件库
最近闲来无事,写了个移动端的事件库,代码贴在下面,大家勿拍. /** @version 1.0.0 @author gangli @deprecated 移动端触摸事件库 */ (function ( ...
- Mastering Web Application Development with AngularJS 读书笔记(一)
第一章笔记 (一) 一.PS:运行时配置IIS <html> <head> <script src="angular.js"></scri ...