自定义上传按钮样式的终极解决方案--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. [MySQL]表创建外键失败:ERROR 1005 (HY000): Can't create table (errno: 150)

    在数据库中建立一个新表(表引擎为InnoDB)时, 需要用到外键, 所以就在建表的时候加了一句foreign key (column) references table_name.但是执行时出现 ER ...

  2. 重新认识synchronized(上)

    synchronized在JDK5之前一直被称为重量级锁,是一个较为鸡肋的设计,而在JDK6对synchronized内在机制进行了大量显著的优化,加入了CAS,轻量级锁和偏向锁的功能,性能上已经跟R ...

  3. 2016.6.18主窗体、子窗体InitializeComponent()事件、Load事件发生顺序以及SeleChanged事件的发生

    主窗体,子窗体的InitializeComponent(构造函数).Load事件执行顺序 1.主窗体定义事件 new 主窗体() 构造函数进入主窗体InitializeComponent函数,该函数中 ...

  4. 2015.12.14 MDI(多文档窗口结构)设置基本解决,折腾一天,部分解决存在已久的问题。但效果仍不如临时航线的MDI窗体结构。

    创建从一个窗口弹出多个子窗口的结构叫MDI窗体结构 如果不按MDI结构管理,最简单的做法是: 在窗体A上添加菜单或按钮,在菜单或按钮事件中添加弹出B窗体代码: B b = new B(); b.sho ...

  5. 2015.3.12Arinc424 Tools中SiniArincCls.csParserFile(string sFile)函数正则表达式理解

    原文: string RegEx1 = @"(\[ITEM\]\s*=[\S\s]*?(?=\[ITEM\])|\[ITEM\]\s*=[\S\s]*)";//用来识别主记录和后续 ...

  6. nginx for windows之负载均衡

    1.编辑c:\nginx\conf\nginx.conf   添加以下内容: #user  nobody;   #启动进程worker_processes  1;   #全局错误日志及PID文件err ...

  7. java 多线程系列基础篇(八)之join()、start()、run()方法

    1. join()介绍 join() 定义在Thread.java中.join() 的作用:让“主线程”等待“子线程”结束之后才能继续运行.这句话可能有点晦涩,我们还是通过例子去理解: // 主线程 ...

  8. 问题:C# TrimEnd 去掉最后的逗号;结果: C#中 TrimEnd()用法

    C#中 TrimEnd()用法 ①去除最后的逗号 string str=ab,cd,ef,; str=str.TrimEnd(new char[] { ',' }); 返回结果则是:ab,cd,ef ...

  9. 用命令查看端口占用情况 netstat -ano

    查看所有端口 netstat -ano 可以看到进程ID 参考某个具体端口,第五列就是PID进程ID了. netstat -aon|findstr "80"

  10. tortoisesvn 本项目的忽略项

    https://tortoisesvn.net/docs/release/TortoiseSVN_en/tsvn-dug-propertypage.html Adding and Editing Pr ...