改变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() ...
随机推荐
- [MySQL]表创建外键失败:ERROR 1005 (HY000): Can't create table (errno: 150)
在数据库中建立一个新表(表引擎为InnoDB)时, 需要用到外键, 所以就在建表的时候加了一句foreign key (column) references table_name.但是执行时出现 ER ...
- 重新认识synchronized(上)
synchronized在JDK5之前一直被称为重量级锁,是一个较为鸡肋的设计,而在JDK6对synchronized内在机制进行了大量显著的优化,加入了CAS,轻量级锁和偏向锁的功能,性能上已经跟R ...
- 2016.6.18主窗体、子窗体InitializeComponent()事件、Load事件发生顺序以及SeleChanged事件的发生
主窗体,子窗体的InitializeComponent(构造函数).Load事件执行顺序 1.主窗体定义事件 new 主窗体() 构造函数进入主窗体InitializeComponent函数,该函数中 ...
- 2015.12.14 MDI(多文档窗口结构)设置基本解决,折腾一天,部分解决存在已久的问题。但效果仍不如临时航线的MDI窗体结构。
创建从一个窗口弹出多个子窗口的结构叫MDI窗体结构 如果不按MDI结构管理,最简单的做法是: 在窗体A上添加菜单或按钮,在菜单或按钮事件中添加弹出B窗体代码: B b = new B(); b.sho ...
- 2015.3.12Arinc424 Tools中SiniArincCls.csParserFile(string sFile)函数正则表达式理解
原文: string RegEx1 = @"(\[ITEM\]\s*=[\S\s]*?(?=\[ITEM\])|\[ITEM\]\s*=[\S\s]*)";//用来识别主记录和后续 ...
- nginx for windows之负载均衡
1.编辑c:\nginx\conf\nginx.conf 添加以下内容: #user nobody; #启动进程worker_processes 1; #全局错误日志及PID文件err ...
- java 多线程系列基础篇(八)之join()、start()、run()方法
1. join()介绍 join() 定义在Thread.java中.join() 的作用:让“主线程”等待“子线程”结束之后才能继续运行.这句话可能有点晦涩,我们还是通过例子去理解: // 主线程 ...
- 问题:C# TrimEnd 去掉最后的逗号;结果: C#中 TrimEnd()用法
C#中 TrimEnd()用法 ①去除最后的逗号 string str=ab,cd,ef,; str=str.TrimEnd(new char[] { ',' }); 返回结果则是:ab,cd,ef ...
- 用命令查看端口占用情况 netstat -ano
查看所有端口 netstat -ano 可以看到进程ID 参考某个具体端口,第五列就是PID进程ID了. netstat -aon|findstr "80"
- tortoisesvn 本项目的忽略项
https://tortoisesvn.net/docs/release/TortoiseSVN_en/tsvn-dug-propertypage.html Adding and Editing Pr ...