<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>input上传按钮美化</title>
<style type="text/css">
/*样式一*/
.a-upload {
padding: 4px 10px;
height: 20px;
line-height: 20px;
position: relative;
cursor: pointer;
color: #;
background: #fafafa;
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
display: inline-block;
*display: inline;
*zoom:
} .a-upload input {
position: absolute;
font-size: 100px;
right: ;
top: ;
opacity: ;
filter: alpha(opacity=);
cursor: pointer
} .a-upload:hover {
color: #;
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: ;
line-height: 20px;
}
.file input {
position: absolute;
font-size: 100px;
right: ;
top: ;
opacity: ;
}
.file:hover {
background: #AADFFD;
border-color: #78C3F3;
color: #;
text-decoration: none;
} </style>
</head>
<body>
<!-- 样式一 -->
<a href="javascript:;" class="a-upload">
<input type="file" name="" id="">点击这里上传文件
</a> <!-- 样式二 -->
<a href="javascript:;" class="file">选择文件
<input type="file" name="" id="">
</a> </body>
</html>

input上传按钮美化的更多相关文章

  1. css input[type=file] 样式美化,input上传按钮美化

    css input[type=file] 样式美化,input上传按钮美化 参考:http://www.haorooms.com/post/css_input_uploadmh

  2. input[type=file] 样式美化,input上传按钮美化

    <style>.file { position: relative; display: inline-block; background: #D0EEFF; border: 1px sol ...

  3. input美化上传按钮美化

    今天工作需求碰到 样式改变上传按钮 效果: <a href="javascript:;" class="a-upload"> <input t ...

  4. css 文件上传按钮美化

    转自:http://zixuephp.net/article-85.html 思路:在一个div里面添加一个图片用作按钮再添加一个input file 文件上传,把文件上传按钮设置透明度为0,绝对定位 ...

  5. input上传按钮的优化

    在使用input标签按钮的时候,<input type="file" value="" /> 显示很难看,怎么办? 使用label <li c ...

  6. input上传按钮 文字修改办法

    解决思路是把input 放在文字的上边,弄成透明的,这样在点文字时,实际是点击了input,这样就实现了文件的上传. 具体代码: <style> #uploadImg{ font-size ...

  7. 使用ajax发送文件的三种方式及预览图片的方法,上传按钮美化

    后端代码 def upload(request): if request.method == "GET": return render(request,'upload.html') ...

  8. Input File 表单上传按钮美化

    HTML <div class="input-file-button"> 上传图片<input type="file" class=" ...

  9. 读取本地文件理解FileReader对象的方法和事件以及上传按钮的美化。

    一.FileReader对象 用来把文件读入内存,并且读取文件中的数据.FileReader对象提供了异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据. 浏览器支持情况, ...

随机推荐

  1. Alpha事后诸葛亮

    Aruba小组Cento项目Postmortem 队员: 408 409 410 428 429 431   设想和目标 1.我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰 ...

  2. 调用mybatis generator已经生成好的dao来查询例子

    package com.cib.xj.controller; import java.util.List; import javax.annotation.Resource; import org.s ...

  3. PathGradientBrush类进行渐变颜色的填充

    private void Form1_Paint(object sender, PaintEventArgs e) { Graphics g = e.Graphics; GraphicsPath gp ...

  4. lua c api

    #include <stdio.h> #include <string.h> extern "C"{ #include <lua.h> #inc ...

  5. [Head First设计模式]生活中学设计模式——状态模式

    系列文章 [Head First设计模式]山西面馆中的设计模式——装饰者模式 [Head First设计模式]山西面馆中的设计模式——观察者模式 [Head First设计模式]山西面馆中的设计模式— ...

  6. C#学习笔记

    1.C#中[],List,Array,ArrayList的区别 [] 是针对特定类型.固定长度的. List 是针对特定类型.任意长度的. Array 是针对任意类型.固定长度的. ArrayList ...

  7. iOS 关于修饰代理用weak还是assign

    对于weak:指明该对象并不负责保持delegate这个对象,delegate这个对象的销毁由外部控制. 对于strong:该对象强引用delegate,外界不能销毁delegate对象,会导致循环引 ...

  8. java表格操作之设置表格列宽

    设置所有列的宽度 /** * 设置所有列的列宽 * @param table * @param width */ public void setAllColumnWidth(JTable table, ...

  9. 【bzoj1076】[SCOI2008]奖励关

    题目描述 你正在玩你最喜欢的电子游戏,并且刚刚进入一个奖励关.在这个奖励关里,系统将依次随机抛出k次宝物,每次你都可以选择吃或者不吃(必须在抛出下一个宝物之前做出选择,且现在决定不吃的宝物以后也不能再 ...

  10. 【Go入门教程5】面向对象(method、指针作为receiver、method继承、method重写)

    前面两章我们介绍了函数和struct,那你是否想过函数当作struct的字段一样来处理呢?今天我们就讲解一下函数的另一种形态,带有接收者(receiver)的函数,我们称为method method ...