自定义上传按钮样式的终极解决方案--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. 浅谈NB_LOT和LTE CAT M1

    1.什么是NB-IoT? 窄带物联网(NB-IoT)也被称为LTE Cat NB1也是一种低功耗广域(LPWA,Low Power Wide Area)技术,它已经开发出来,可以使用现有的移动网络将各 ...

  2. Python使用类

    #coding:utf8 from selenium import webdriverfrom time import sleep class urlpage(object): #创建浏览器对象 de ...

  3. websocket之三:Tomcat的WebSocket实现

    Tomcat自7.0.5版本开始支持WebSocket,并且实现了Java WebSocket规范(JSR356 ),而在7.0.5版本之前(7.0.2版本之后)则采用自定义API,即WebSocke ...

  4. 此上下文中不允许异步操作。启动异步操作的页必须将 Async 特性设置为 true,并且异步操作只能在 PreRenderComplete 事件之前的页上启动。

    <%@ Page Language="C#" AutoEventWireup="true" ...... Async="true" % ...

  5. 关于python+django操作数据库中的表

    数据库中的表示这样设计的 class C(models.Model): name = models.CharField(max_length=32) class B(models.Model): na ...

  6. 数据库连接池在Tomcat中的几种配置方法

    数据库连接是一种关键的有限的昂贵的资源,这在多用户网页应用程序中体现的尤为突出.对数据库连接的管理能显著影响到整个应用程序的伸缩性和健壮性,影响到程序的性能指标,数据库连接池正是针对这个问题提出的. ...

  7. ORA-00904: 标识符无效——解决方案

    转自:https://blog.csdn.net/jajavaja/article/details/49122639 建表时列名用双引号引着(用Navicat工具建表默认是加上双引号的),java连接 ...

  8. Shell编程实战 1.1 监控思路架构介绍

    监控思路,架构介绍 需求:使用shell定制各种个性化的告警工具,但需要统一化管理,规范化管理. 思路:指定一个脚本包,包含主程序,子程序,配置文件,邮件引擎,输出日志等. 主程序:作为脚本的入口,是 ...

  9. Javascript面向对象(三):非构造函数的继承

    这个系列的第一部分介绍了"封装",第二部分介绍了使用构造函数实现"继承". 今天是最后一个部分,介绍不使用构造函数实现"继承". 一.什么是 ...

  10. Linux 查看一个端口的连接数

    netstat -antp|grep -i "80" |wc -l 譬如查看80端口的连接数