改变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() ...
随机推荐
- 机器学习:SVM(scikit-learn 中的 RBF、RBF 中的超参数 γ)
一.高斯核函数.高斯函数 μ:期望值,均值,样本平均数:(决定告诉函数中心轴的位置:x = μ) σ2:方差:(度量随机样本和平均值之间的偏离程度:, 为总体方差, 为变量, 为总体均值, 为总 ...
- kafka集群安装和kafka-manager
1.软件环境 (3台服务器-测试)10.11.12.31 mykafka110.11.12.32 mykafka210.11.12.33 mykafka3 [root@localhost ~]# ca ...
- DAY17-Django之model查询
查询表记录 看专业的官网文档,做专业的程序员! 查询相关API <1> all(): 查询所有结果——QuerySet <2> filter(**kwargs): 它包含了与所 ...
- jdbc.properties 文件的配置
jdbc.properties文件的配置 使用配置文件访问数据库的优点是: 一次编写随时调用,数据库类型发生变化只需要修改配置文件. 配置文件的设置: 在配置文件中,key-value对应的方式编 ...
- Consumer设计-high/low Level Consumer
1 Producer和Consumer的数据推送拉取方式 Producer Producer通过主动Push的方式将消息发布到Broker n Consumer Consumer通过Pull从Br ...
- C++输出斐波那契数列的几种方法
定义: 斐波那契数列指的是这样一个数列:0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, ... 这个数列从第三项开始,每一项都等于前两项之和. 以输出斐波那 ...
- SpringBoot07 异常枚举、自定义异常、统一的全局异常处理
1 异常编号和提示信息统一管理 利用枚举来实现异常的统一管理 package cn.xiangxu.springboottest.enums; import lombok.Getter; /** * ...
- webfrom 做项目的注意事项
1.展示细节 如男女显示问题 不能显示true false 时间转换成中文 民族显示汉字 不能直接显示代码2.用户名重复验证 从数据库中查询验证4.日期判断 判断年份有点问题 var y ...
- winform 对话框控件
ColorDialog 可以调节颜色的控件,如果给一个按钮点击事件 ColorDialog.showdialog();就会弹出这个 返回值是个枚举类 然后定义一个这个类的变量 接收一下它的返回值 Di ...
- WINFORM 无边框窗体 阴影与移动
//窗体移动API[DllImport("user32.dll")]public static extern bool ReleaseCapture();[DllImport(&q ...