改变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() ...
随机推荐
- 机器学习:PCA(基础理解、降维理解)
PCA(Principal Component Analysis) 一.指导思想 降维是实现数据优化的手段,主成分分析(PCA)是实现降维的手段: 降维是在训练算法模型前对数据集进行处理,会丢失信息. ...
- OpenCV 视频监控(Video Surveilance)的算法体系
如前面说到的,OpenCV VS提供了6组算法的接口,分别是:前景检测.新目标检测.目标跟踪.轨迹生成.跟踪后处理.轨迹分析,除了轨迹生成用于轨迹数据的保存以外,其他5个部分都是标准的视频监控算法体系 ...
- 人脸识别FaceNet+TensorFlow
一.本文目标 利用facenet源码实现从摄像头读取视频,实时检测并识别视频中的人脸.换句话说:把facenet源码中contributed目录下的real_time_face_recognition ...
- paramiko 堡垒机
用paramiko写堡垒机 paramiko paramiko模块,基于SSH用于连接远程服务器并执行相关操作. 基本用法 SSHClient 基于用户名密码连接: 基础用法: import para ...
- 【276】◀▶ Python 字符串函数说明
参考:Python 字符串函数 01 capitalize 把字符串的第一个字符大写,其他字母变小写. 02 center 返回一个原字符串居中,并使用空格填充至长度 width 的新字符串. ...
- java飞机大战之子弹的自动生成
import java.awt.Graphics; import java.util.ArrayList; import javax.swing.JFrame; import javax.swing. ...
- [Elasticsearch2.x] 多字段搜索 (三) - multi_match查询和多数字段 <译>
multi_match查询 multi_match查询提供了一个简便的方法用来对多个字段执行相同的查询. NOTE 存在几种类型的multi_match查询,其中的3种正好和在“了解你的数据”一节中提 ...
- Codeforces #505(div1+div2) D Recovering BST
题意:给你一个升序的数组,元素之间如果gcd不为1可以建边,让你判断是否可以建成一颗二叉搜索树. 解法:dp,首先建图,然后进行状态转移.因为如果点k左端与i相连,右端与k相连,则i和k可以相连,同时 ...
- Easyui datebox单击文本框显示日期选择 eayui版本1.5.4.1
Easyui默认是点击文本框后面的图标显示日期,体验很不好,所以我想单击文本框就显示日期选择框,网上很多版本是1.3,1.4的,于是自己就比葫芦画瓢改了一个1.5.4.1的版本. 我参考了网上这个帖子 ...
- 771. Jewels and Stones珠宝数组和石头数组中的字母对应
[抄题]: You're given strings J representing the types of stones that are jewels, and S representing th ...