改变input[type=file]的默认样式
自定义上传按钮样式的终极解决方案--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]的默认样式的更多相关文章
- 改变input type="file" 文字、样式等
<div class="tac"> <input type="file" id="browsefile" class=&q ...
- 修改input type=file 标签默认样式的简单方法
<html><head><title></title></head><body><form id="upload ...
- <input type='file'/>把默认样式改成框框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 去掉input type=file的默认样式
原样式: 解决: 加style="opacity: 0;"变成透明的 然后可以外面套个div,在div上自定义样式.
- 修改 input[type="radio"] 和 input[type="checkbox"] 的默认样式
表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或 ...
- 清除input[type=number]的默认样式
input[type=number] { -moz-appearance:textfield; } input[type=number]::-webkit-inner-spin-button, inp ...
- 去除input[type=number]的默认样式
input[type=number] { -moz-appearance: textfield; } input[type=number]::-webkit-inner-spin-button, in ...
- 去掉input[type="number"]的默认样式
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{ -webkit-appearance: none !importa ...
- 关于去除input type='file'改变组件的默认样式换成自己需要的样式的解决方案
在工作中时常会遇到如需要上传功能的按钮,而不像需要系统默认的样式时候,可以采取以下的解决方案: <img onclick="getElementById('file').click() ...
随机推荐
- java流类共享篇
总结: package com.aini; import java.io.*; import java.util.StringBuffere; public class tyt { public st ...
- sql语句中GROUP BY 和 HAVING的使用 count()
在介绍GROUP BY 和 HAVING 子句前,我们必需先讲讲sql语言中一种特殊的函数:聚合函数, 例如SUM, COUNT, MAX, AVG等.这些函数和其它函数的根本区别就是它们一般作用在多 ...
- windows下python访问ipv6报错
错误 Traceback (most recent call last): File , in <module> app.run() File , in run return wsgi.r ...
- XSS的各种用途
0x01 最常见之窃取用户cookie 当cookie没有设置HttpOnly属性时,可以通过javascript代码创建img,script,iframe等标签,并把src属性设置为自己部署的xss ...
- java之类和对象
类的成员: 成员变量和成员函数. 成员函数:构造函数和普通函数. 构造函数: 作用:自动对对象进行初始化 特点:1.方法名和类名一致 2.没有返回值 问: 1.我们能够定义几次构造函数? 我们可以定义 ...
- IDEA创建MAVEN 无骨架WEB 项目
Idea创建maven带有骨架的web项目的时候,会缺少必要文件夹,而且会多出来一些我们不需要的东西 详见:IDEA创建Maven Web项目 所以我们也可以创建无骨架项目: 创建maven项目 不选 ...
- 如何选择RDBMS关系型数据库和Nosql非关系型数据库?
RDBMS关系型数据库和Nosql非关系型数据库区别: 一.RDBMS是关系型数据库模式: 1.二维模式,由行列组成. 2.非常强调事务原子性,例如用户提出一个请求,DB完整的去执行,如果报错就全部回 ...
- 时间获取_Date\SimpleDateFormat\Calendar类
1.获取当前的日期,并把这个日期转换为指定格式的字符串,如2088-08-08 08:08:08 import java.text.SimpleDateFormat; import java.uti ...
- PCL—点云滤波(初步处理)
博客转载自:http://www.cnblogs.com/ironstark/p/4991232.html 点云滤波的概念 点云滤波是点云处理的基本步骤,也是进行 high level 三维图像处理之 ...
- 高性能MySQL笔记-第5章Indexing for High Performance-003索引的作用
一. 1. 1). Indexes reduce the amount of data the server has to examine.2). Indexes help the server av ...