自定义上传按钮样式的终极解决方案--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. Python内置:items()方法

    文章转载于:https://www.cnblogs.com/wushuaishuai/p/7738118.html(博主:IT技术随笔) #Python3中已取消iteritems()方法 描述 Py ...

  2. PostgreSQL服务器参数配置

    服务器配置1 设置参数1.1 参数名称和值所有参数名都是大小写不敏感的.每个参数都可以接受五种类型之一的值: 布尔.字符串.整数. 浮点数或枚举.布尔: 值可以被写成 on, off, true, f ...

  3. delphi 在线程中运行控制台命令(console)

    在编程开发的时候,我们时常会调用windows本身的功能,如:检测网络通断,连接无线wifi等. 虽然,用 windows api 操作可以完美地完成这些操作,但是,函数参数太难了.令人望而生畏,不是 ...

  4. Developer tools

    20. Developer tools Spring Boot includes an additional set of tools that can make the application de ...

  5. Python之整数,浮点数和布尔类型

    整数和浮点数有那个四则运算: 两种类型的数可以直接进行加减,当整数和浮点数进行加减的时候,结果会自动的变为浮点数,其中除法运算是“/”来表示的, 而余数的算术符号是“%”来表示的.如果是为了求除完后的 ...

  6. xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at:

    今天更新了一下mac系统,然后发现  idea的svn插件不能用了,有的报 有的报  is not under version 经查找需要做如下处理,打开终端,安装xcode: xcode-selec ...

  7. matlab rand(3,5)

    rand()函数在(0,1)上创建均匀分布的随机数的数组 >> rand(3,5) ans = 0.8147 0.9134 0.2785 0.9649 0.9572 0.9058 0.63 ...

  8. 阿里云 linux搭建git服务器

    git是非常方便的版本控制工具,目前网上有很多免费的git仓库可以给我们使用,但是有些时候我们并不放心将我们的项目寄放在别人的服务器上,这个时候就需要自己搭建一个git服务器. 在linux上面搭建g ...

  9. 解决校园Dr客户端端口占用问题(2)

    win + R -> 输入cmd回车 -> 输入netsh winsock reset重启 -> 好了享受上网的快乐吧骚年

  10. HDU 3974 Assign the task (DFS+线段树)

    题意:给定一棵树的公司职员管理图,有两种操作, 第一种是 T x y,把 x 及员工都变成 y, 第二种是 C x 询问 x 当前的数. 析:先把该树用dfs遍历,形成一个序列,然后再用线段树进行维护 ...