<!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 ...