改变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() ...
随机推荐
- PostgreSQL 9.5 高可用、负载均衡和复制
高可用.负载均衡和复制 1. 不同方案的比较 共享磁盘故障转移 共享磁盘故障转移避免了只使用一份数据库拷贝带来的同步开销. 它使用一个由多个服务器共享的单一磁盘阵列.文件系统(块设备)复制 DRBD是 ...
- tomcat正常启动但是访问 404
最近遇到了一些奇葩的的问题,搞了好半天才处理掉.今天就简单记录一下吧,以备不时之需. 问题描述: 在整合spring mvc项目的完成后,正常启动tomcat,发现tomcat启动成功了,但是访问本 ...
- Resque基本
原文:http://www.cnblogs.com/rywx/archive/2012/05/26/2519615.html Resque resque是基于redis的后台任务组件,能把任何类或模块 ...
- 50 states of America
美国州名 州名英文 州名音标 简写 首府 首府 阿拉巴马州 Alabama [ˌæləˈbæmə] AL 蒙哥马利 Montgomery[mənt'gʌməri] 阿拉斯加州 Alaska [ ...
- 10-19C#基础--第四部分类型(2)重点
类型: 一.数字:Math类型 1)Math.Ceiling() ( 表示进位.));//只要小数点后有值,就向前进一位,取上限. string s = Console.ReadLine(); dou ...
- CentOS6.5安装完没有网络的解决办法
昨天下了个CentOS 6.5 Minimal 版,在VMware 10下安装好了之后,发现上不了网,PING外网也PING不通. 在网上搜了一下,发现Linux安装好了之后,网卡默认是没有启动的,下 ...
- 最全SDWebImage-3.8版本源码阅读详解
一.前言 SDWebImage,非常友好的网络图片加载第三方框架,在GitHub中已经获得了15000++的star,链接地址:https://github.com/rs/SDWebImage 本人分 ...
- linux命令-passwd
修改密码 #passwd 新密码 重新输入密码 #passwd dennywang ////命令+用户名 ////////////////////////////////////////////// ...
- java执行linux命令的工具类
package com.starfast.common.util; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import ja ...
- day70-oracle PLSQL_02光标
涨工资之前员工的工资. 如果PLSQL程序没有commit的话,命令行这边的客户端是无法读到的.这是oracle数据库的隔离级别. 为什么在PLSQL程序中commit之后还是不行呢? PLSQL程序 ...