自定义上传按钮样式的终极解决方案--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. PostgreSQL 9.5 高可用、负载均衡和复制

    高可用.负载均衡和复制 1. 不同方案的比较 共享磁盘故障转移 共享磁盘故障转移避免了只使用一份数据库拷贝带来的同步开销. 它使用一个由多个服务器共享的单一磁盘阵列.文件系统(块设备)复制 DRBD是 ...

  2. tomcat正常启动但是访问 404

    最近遇到了一些奇葩的的问题,搞了好半天才处理掉.今天就简单记录一下吧,以备不时之需.  问题描述: 在整合spring mvc项目的完成后,正常启动tomcat,发现tomcat启动成功了,但是访问本 ...

  3. Resque基本

    原文:http://www.cnblogs.com/rywx/archive/2012/05/26/2519615.html Resque resque是基于redis的后台任务组件,能把任何类或模块 ...

  4. 50 states of America

    美国州名 州名英文  州名音标 简写 首府 首府 阿拉巴马州 Alabama   [ˌæləˈbæmə] AL 蒙哥马利 Montgomery[mənt'gʌməri] 阿拉斯加州 Alaska  [ ...

  5. 10-19C#基础--第四部分类型(2)重点

    类型: 一.数字:Math类型 1)Math.Ceiling() ( 表示进位.));//只要小数点后有值,就向前进一位,取上限. string s = Console.ReadLine(); dou ...

  6. CentOS6.5安装完没有网络的解决办法

    昨天下了个CentOS 6.5 Minimal 版,在VMware 10下安装好了之后,发现上不了网,PING外网也PING不通. 在网上搜了一下,发现Linux安装好了之后,网卡默认是没有启动的,下 ...

  7. 最全SDWebImage-3.8版本源码阅读详解

    一.前言 SDWebImage,非常友好的网络图片加载第三方框架,在GitHub中已经获得了15000++的star,链接地址:https://github.com/rs/SDWebImage 本人分 ...

  8. linux命令-passwd

    修改密码 #passwd 新密码 重新输入密码 #passwd dennywang  ////命令+用户名 ////////////////////////////////////////////// ...

  9. java执行linux命令的工具类

    package com.starfast.common.util; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import ja ...

  10. day70-oracle PLSQL_02光标

    涨工资之前员工的工资. 如果PLSQL程序没有commit的话,命令行这边的客户端是无法读到的.这是oracle数据库的隔离级别. 为什么在PLSQL程序中commit之后还是不行呢? PLSQL程序 ...