自定义上传按钮样式的终极解决方案--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. codeforce 103B Cthulhu

    B. Cthulhu time limit per test 2 seconds memory limit per test 256 megabytes input standard input ou ...

  2. 山区建小学(区间DP)

    山区建小学 时间限制: 1 Sec  内存限制: 128 MB提交: 17  解决: 5[提交][状态][讨论版][命题人:quanxing] 题目描述 政府在某山区修建了一条道路,恰好穿越总共m个村 ...

  3. Bresenham快速画直线算法

    现在的计算机的图像的都是用像素表示的,无论是点.直线.圆或其他图形最终都会以点的形式显示.人们看到屏幕的直线只不过是模拟出来的,人眼不能分辨出来而已.那么计算机是如何画直线的呢,其实有比较多的算法,这 ...

  4. c++ 插入排序算法

    第一.算法描述       直插排序很容易理解,在我们打扑克牌的时候,每一次摸完牌,都会按数字大小或者花色,插入到合适的位置,直到摸完最后一张牌,我们手中的牌已经按大小顺序排列好了.这整个过程就是一个 ...

  5. Celery-4.1 用户指南: Debugging (调试)

    远程调试任务(pdb) 基础 celery.contrib.rdb 是 pdb 的一个扩展版本,它支持不通过终端访问就可以远程调试进程. 示例: from celery import task fro ...

  6. Ettercap进行arp毒化

    攻击者IP:192.168.220.152 受害者IP:192.168.220.151 网关:192.168.220.2 修改DNS文件 ┌─[root@sch01ar]─[~] └──╼ #vim ...

  7. css垂直居中方法(二)

    第四种方法: 这个方法把一些div的显示方式设置为表格,因此我们可以使用表格的vartial-align属性. 代码如下: <!doctype html> <html lang=&q ...

  8. HBase入门基础教程 HBase之单机模式与伪分布式模式安装

    在本篇文章中,我们将介绍Hbase的单机模式安装与伪分布式的安装方式,以及通过浏览器查看Hbase的用户界面.搭建HBase伪分布式环境的前提是我们已经搭建好了Hadoop完全分布式环境,搭建Hado ...

  9. 【274】Python 相关问题

    一.中文编码   参考:Python 中文编码 Python中默认的编码格式是 ASCII 格式,在没修改编码格式时无法正确打印汉字,所以在读取中文时会报错. 解决方法为只要在文件开头加入如下代码,任 ...

  10. 百度地图SDK v2.1.2使用方法

    1.开发工具 Android开发工具有很多,开发者可根据自己的喜好进行选择.在此,我们推荐开发者使用Eclipse作为自己的开发工具,本套开发指南也是针对Eclipse开发环境下进行编写的. 2.工程 ...