改变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() ...
随机推荐
- codeforce 103B Cthulhu
B. Cthulhu time limit per test 2 seconds memory limit per test 256 megabytes input standard input ou ...
- 山区建小学(区间DP)
山区建小学 时间限制: 1 Sec 内存限制: 128 MB提交: 17 解决: 5[提交][状态][讨论版][命题人:quanxing] 题目描述 政府在某山区修建了一条道路,恰好穿越总共m个村 ...
- Bresenham快速画直线算法
现在的计算机的图像的都是用像素表示的,无论是点.直线.圆或其他图形最终都会以点的形式显示.人们看到屏幕的直线只不过是模拟出来的,人眼不能分辨出来而已.那么计算机是如何画直线的呢,其实有比较多的算法,这 ...
- c++ 插入排序算法
第一.算法描述 直插排序很容易理解,在我们打扑克牌的时候,每一次摸完牌,都会按数字大小或者花色,插入到合适的位置,直到摸完最后一张牌,我们手中的牌已经按大小顺序排列好了.这整个过程就是一个 ...
- Celery-4.1 用户指南: Debugging (调试)
远程调试任务(pdb) 基础 celery.contrib.rdb 是 pdb 的一个扩展版本,它支持不通过终端访问就可以远程调试进程. 示例: from celery import task fro ...
- Ettercap进行arp毒化
攻击者IP:192.168.220.152 受害者IP:192.168.220.151 网关:192.168.220.2 修改DNS文件 ┌─[root@sch01ar]─[~] └──╼ #vim ...
- css垂直居中方法(二)
第四种方法: 这个方法把一些div的显示方式设置为表格,因此我们可以使用表格的vartial-align属性. 代码如下: <!doctype html> <html lang=&q ...
- HBase入门基础教程 HBase之单机模式与伪分布式模式安装
在本篇文章中,我们将介绍Hbase的单机模式安装与伪分布式的安装方式,以及通过浏览器查看Hbase的用户界面.搭建HBase伪分布式环境的前提是我们已经搭建好了Hadoop完全分布式环境,搭建Hado ...
- 【274】Python 相关问题
一.中文编码 参考:Python 中文编码 Python中默认的编码格式是 ASCII 格式,在没修改编码格式时无法正确打印汉字,所以在读取中文时会报错. 解决方法为只要在文件开头加入如下代码,任 ...
- 百度地图SDK v2.1.2使用方法
1.开发工具 Android开发工具有很多,开发者可根据自己的喜好进行选择.在此,我们推荐开发者使用Eclipse作为自己的开发工具,本套开发指南也是针对Eclipse开发环境下进行编写的. 2.工程 ...