input按钮上传按钮样式
主要是定位和不透明度来实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*a upload */
.a-upload {
padding: 4px 10px;
height: 20px;
line-height: 20px;
position: relative;
cursor: pointer;
color: #888;
background: #fafafa;
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
display: inline-block;
*display: inline;
*zoom: 1
} .a-upload input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
filter: alpha(opacity=0);
cursor: pointer
} .a-upload:hover {
color: #444;
background: #eee;
border-color: #ccc;
text-decoration: none
} .file {
position: relative;
display: inline-block;
background: #D0EEFF;
border: 1px solid #99D3F5;
border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
color: #1E88C7;
text-decoration: none;
text-indent: 0;
line-height: 20px;
}
.file input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
}
.file:hover {
background: #AADFFD;
border-color: #78C3F3;
color: #004974;
text-decoration: none;
}
</style>
</head>
<body>
<a href="javascript:;" class="a-upload">
<input type="file" name="">点击这里上传文件
</a> <a href="javascript:;" class="file">选择文件
<input type="file" name="">
</a>
</body>
</html>
input按钮上传按钮样式的更多相关文章
- input美化上传按钮美化
今天工作需求碰到 样式改变上传按钮 效果: <a href="javascript:;" class="a-upload"> <input t ...
- 读取本地文件理解FileReader对象的方法和事件以及上传按钮的美化。
一.FileReader对象 用来把文件读入内存,并且读取文件中的数据.FileReader对象提供了异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据. 浏览器支持情况, ...
- ajax+ashx 完美实现input file上传文件
1.input file 样式不能满足需求 <input type="file" value="浏览" /> IE8效果图: Firefox效 ...
- css input[type=file] 样式美化，input上传按钮美化
css input[type=file] 样式美化,input上传按钮美化 参考:http://www.haorooms.com/post/css_input_uploadmh
- 上传按钮样式优化 <input type="file" />
<html><head><title>上传按钮样式优化</title> <style>.form-element-file-wapper { ...
- input上传按钮美化
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 兼容IE8的flash上传框架"uploadify"自定义上传按钮样式的办法
(uploadify版本:3.2.1 ) 因为公司业务的原因,所做的项目需要兼容IE8,因此做的上传插件无奈选择的是基于flash的uploadify. 由于是基于flash的,所以使用过程中,难以给 ...
- 一个漂亮的上传按钮input[type=file]
;;} <div class="input-group xj-file xj-panel-top"> <span class="input-group- ...
- CSS自定义文件上传按钮样式，兼容主流浏览器
解决办法:使用text文本框及a链接模拟文件上传按钮,并且把文件上传按钮放在他们上面,并且文件上传按钮显示透明.1.图片2. [代码][HTML]代码 <div class="b ...
随机推荐
- effective OC2.0 52阅读笔记（二 对象、消息、运行期）
第二章:对象.消息.运行期 6 理解属性这一概念 总结:OC解决硬编码偏移量问题的做法,一种方案是把实例变量当做一种存储偏移量所用的特殊变量,交由类对象保管,偏移量会在运行期查找,叫做稳固的“应用程序 ...
- CentOS基础指令备忘
功能 指令 可用参数 示例 说明 新建文件夹 mkdir mkdir etc/temp 在当前目录的etc文件夹下新建temp文件夹 新建文件 vi vi abc.sh 新建名为abc.sh的 ...
- C Primer Plus_第一章_概览_复习题与编程练习
REVIEW 1.就编程而言,可移植性表示什么? me 一个系统上编写的程序经过很少改动或者不需改动就可以在另一个系统上运行.如果修改是必须的,则通常只改变伴随主程序的一个头文件中的几项内容即可.(P ...
- codeforces 510B. Fox And Two Dots 解题报告
题目链接:http://codeforces.com/problemset/problem/510/B 题目意思:给出 n 行 m 列只有大写字母组成的字符串.问具有相同字母的能否组成一个环. 很容易 ...
- log4j:WARN No appenders could be found for logger
直接写我的解决办法: 在src下面新建file名为log4j.properties内容如下:# Configure logging for testing: optionally with log f ...
- mybatis新增数据后获取自增主键
mybatis对应mysql <insert id="insert" parameterType="com.timestech.wsgk.web.model.Sys ...
- struts2截取字符串
<struts:if test="null!=pushAd&&pushAd.length()>14"> <struts:property v ...
- JavaScript数组排序
JavaScript的sort方法排序是有问题的,我们可以给sort方法传一个参数 function Compare(value1, value2) { //数字排序的函数参数 if (value1 ...
- stm32——NFC芯片--PN532的使用
stm32——NFC芯片--PN532的使用 一.NFC简介 NFC(Near Field Communication)近场通信,是一种短距高频的无线电技术,在13.56MHz频率运行于20厘米距离内 ...
- hdu 1541 Stars
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1541 思路:要求求出不同等级的星星的个数,开始怎么也想不到用树状数组,看完某些大神的博客之后才用树状数 ...