自定义上传按钮样式的终极解决方案--input透明法

<style>

.div1{

float: left;

height: 41px;

background: #f5696c;

width: 144px;

position:relative;

}

.div2{

text-align:center;

padding-top:12px;

font-size:15px;

font-weight:800

}

.inputstyle{

    width: 144px;

    height: 41px;

    cursor: pointer;

    font-size: 30px;

    outline: medium none;

    position: absolute;

    filter:alpha(opacity=0);

    -moz-opacity:0;

    opacity:0; 

    left:0px;

    top: 0px;

}

</style>

  

<div class="div1">

    <div class="div2">上传图片</div>

    <input type="file" class="inputstyle">

</div>

如此就可以是实现“点击$(".div2")上传文件”的效果了。

改变input[type=file]的默认样式的更多相关文章

  1. 改变input type="file" 文字、样式等

    <div class="tac"> <input type="file" id="browsefile" class=&q ...

  2. 修改input type=file 标签默认样式的简单方法

    <html><head><title></title></head><body><form id="upload ...

  3. <input type='file'/>把默认样式改成框框

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 去掉input type=file的默认样式

    原样式: 解决: 加style="opacity: 0;"变成透明的 然后可以外面套个div,在div上自定义样式.

  5. 修改 input[type="radio"] 和 input[type="checkbox"] 的默认样式

    表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或 ...

  6. 清除input[type=number]的默认样式

    input[type=number] { -moz-appearance:textfield; } input[type=number]::-webkit-inner-spin-button, inp ...

  7. 去除input[type=number]的默认样式

    input[type=number] { -moz-appearance: textfield; } input[type=number]::-webkit-inner-spin-button, in ...

  8. 去掉input[type="number"]的默认样式

    input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{ -webkit-appearance: none !importa ...

  9. 关于去除input type='file'改变组件的默认样式换成自己需要的样式的解决方案

    在工作中时常会遇到如需要上传功能的按钮,而不像需要系统默认的样式时候,可以采取以下的解决方案: <img onclick="getElementById('file').click() ...

随机推荐

  1. install 命令

    install命令的作用是安装或升级软件或备份数据,它的使用权限是所有用户.install命令和cp命令类似,都可以将文件/目录拷贝到指定的地点.但是,install允许你控制目标文件的属性.inst ...

  2. Generate web.xml deployment descriptor

    eclipse 使用tomcat7.0建立Dynamic Web Project 时,next至步骤“Web Module”,此时勾选选项“Generate web.xml deployment de ...

  3. 1 ignite核心特性

    1 Ignite是什么? Apache Ignite是一个以内存为中心的分布式数据库.缓存和处理平台,支持事务.分析以及流式负载,可以在PB级数据上享有内存级的性能. 2 Ignite是不是内存数据库 ...

  4. leetcode643

    double findMaxAverage(vector<int>& nums, int k) { double max = INT_MIN; int len = nums.siz ...

  5. 链接ssh失败问题

    Starting sshd:/var/empty/sshd must be owned by root and not group or world-writable.                 ...

  6. TypeError: 'append' called on an object that does not implement interface FormData 解决方法

    使用ajax提交form表单时,$("formId").serialize()不能提交type="file"类型的input,这个时候可以选择使用FormDat ...

  7. windows安装和配置JDK

    安装完JDK后配置环境变量  计算机→属性→高级系统设置→高级→环境变量   系统变量→新建 JAVA_HOME 变量 . 变量值填写jdk的安装目录(本人是 E:\Java\jdk1.7.0)   ...

  8. 下拉菜单控件JComboBox的使用

    ---------------siwuxie095                             工程名:TestUI 包名:com.siwuxie095.ui 类名:TestList.ja ...

  9. 数据库之_CRUD

    CRUD是指在做计算处理时的增加(Create).读取查询(Retrieve).更新(Update)和删除(Delete)几个单词的首字母简写.主要被用在描述软件系统中DataBase或者持久层的基本 ...

  10. iOS 聊天界面

    #import <UIKit/UIKit.h> @interface AppDelegate : UIResponder <UIApplicationDelegate> @pr ...