type=file的inpu美化,自定义上传按钮样式
<div class="div1">
<div class="div2">点击上传</div>
<input type="file" class="file_input">
</div>
css部分: <style>
.div1 {
position: relative;
} .div2 {
width: 100px;
height: 36px;
background: #2178fc;
color: #fff;
text-align: center;
line-height: 36px;
} .file_input {
width: 200px;/*因为file-input在部分浏览器中会自带一个输入框,需要双击才可以点击上传,放大后将其定位到div外面就好啦*/
height: 36px;
position: absolute;
left: -100px;
top: ;
z-index:;
-moz-opacity: ;
-ms-opacity: ;
-webkit-opacity: ;
opacity: ; /*css属性——opcity不透明度,取值0-1*/
filter: alpha(opacity=); /*兼容IE8及以下--filter属性是IE特有的,它还有很多其它滤镜效果,而filter: alpha(opacity=0); 兼容IE8及以下的IE浏览器(如果你的电脑IE是8以下的版本,使用某些效果是可能会有一个允许ActiveX的提示,注意点一下就ok啦)*/
cursor: pointer;
}
</style>
type=file的inpu美化,自定义上传按钮样式的更多相关文章
- 兼容IE8的flash上传框架"uploadify"自定义上传按钮样式的办法
(uploadify版本:3.2.1 ) 因为公司业务的原因,所做的项目需要兼容IE8,因此做的上传插件无奈选择的是基于flash的uploadify. 由于是基于flash的,所以使用过程中,难以给 ...
- 上传按钮样式优化 <input type="file" />
<html><head><title>上传按钮样式优化</title> <style>.form-element-file-wapper { ...
- input按钮上传按钮样式
主要是定位和不透明度来实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- CSS自定义文件上传按钮样式,兼容主流浏览器
解决办法:使用text文本框及a链接模拟文件上传按钮,并且把文件上传按钮放在他们上面,并且文件上传按钮显示透明.1.图片2. [代码][HTML]代码 <div class="b ...
- 自定义上传按钮 <input type="file" name = "file"/> (将file隐藏在button下)
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- [k]自定义上传文件按钮样式
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> ...
- el-upload自定义上传文件,并携带其余参数,且action不报错
用el-upload组件自定义上传按钮,并携带其余参数,且必传参数action 不报错 <template> <el-col :span="6" :mode=&q ...
- css input[type=file] 样式美化,input上传按钮美化
css input[type=file] 样式美化,input上传按钮美化 参考:http://www.haorooms.com/post/css_input_uploadmh
- input type=file 上传文件样式美化(转载)
input type=file 上传文件样式美化 来源:https://www.jianshu.com/p/6390595e5a36 在做input文本上传时,由于html原生的上传按钮比较丑,需要对 ...
随机推荐
- 洛谷P3957 跳房子(Noip2017普及组 T4)
今天我们的考试就考到了这道题,在考场上就压根没有思路,我知道它是一道dp的题,但因为太弱还是写不出来. 下来评讲的时候知道了一些思路,是dp加上二分查找的方式,还能够用单调队列优化. 但看了网上的许多 ...
- 番外篇-AppService服务
一. public async Task<ListResultDto<ArchitectureDto>> GetArchitecture() { var architectur ...
- Python学习之路——三元运算符推导式
三元运算符 # 生成器:包含yield关键字的函数就是生成器 def my_generator(): yield 1 yield 2 yield 3 g_obj = my_generator() # ...
- CQOI2018异或序列 [莫队]
莫队板子 用于复习 #include <cstdio> #include <cstdlib> #include <algorithm> #include <c ...
- Java【第五篇】基本语法之--数组
数组概述 数组是多个相同类型数据的组合,实现对这些数据的统一管理数组属引用类型,数组型数据是对象(Object),数组中的每个元素相当于该对象的成员变量数组中的元素可以是任何数据类型,包括基本类型和引 ...
- css实现文本两端对齐
display:inline-block; text-align:center; text-align-last:justify;
- 优化算法系列-遗传算法(3)——NSGAII学习网址
JMetal https://www.cnblogs.com/denggaoshan/p/6306640.html https://www.cnblogs.com/denggaoshan/p/6308 ...
- crm 数据展示 和分页思想(一)
1. 数据的展示 数据通过ORM查询出来 对象列表 QuerySet 1. 普通的字段 对象.字段名 ——> 数据库中的值 <td>{{ customer.phone }}</ ...
- gdb core 调试多线程
ref :http://blog.sina.com.cn/s/blog_62dc94eb0100flyn.html 如果目标进程已经core dump了,那么 gdb -c core xxx xx ...
- [再寄小读者之数学篇](2014-06-23 二阶导数估计 [中国科学技术大学2013年高等数学B 考研试题])
设 $f(x)$ 二阶连续可导, $f(0)=f(1)=0$, $\dps{\max_{0\leq x\leq 1}f(x)=2}$. 证明: $$\bex \min_{0\leq x\leq 1}f ...