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原生的上传按钮比较丑,需要对 ...
随机推荐
- 蒟蒻浅谈树链剖分之一——两个dfs操作
树链剖分,顾名思义就是将树形的结构剖分成链,我们以此便于在链上操作 首先我们需要明白在树链剖分中的一些概念 重儿子:某节点所有儿子中子树最多的儿子 重链:有重儿子构成的链 dfs序:按重儿子优先遍历时 ...
- golang运算与循环等
一.golang运算符 1.算术运算符 + 相加- 相减* 相乘/ 相除% 求余++ 自增-- 自减 2.关系运算符 == 等于!= 不等于> 大于< 小于>= 大于等于<= ...
- Openvpn搭建详解
说明:公司新购进一批阿里云ESC服务器,计划只有一台有公网IP,其他都通过内网连接.那么问题来了,平时维护时,如果要通过远程工具连接其他服务器就需要先登录公网服务器(A),然后跳转到其内网其他机器上, ...
- Python学习之路——函数对象作用域名称空间
一.函数对象 # 函数名就是存放了函数的内存地址,存放了内存地址的变量都是对象,即 函数名 就是 函数对象 # 函数对象的应用 # 1 可以直接被引用 fn = cp_fn # 2 可以当作函数参数传 ...
- Amazon SNS (Simple Notification Service) Using C# and Visual Studio
SNS (Amazon Simple Notification Services) Amazon SNS (Amazon Simple Notification Services) is a noti ...
- Spring Boot程序获取tomcat启动端口
package com.geostar.geostack.git_branch_manager.config; import org.springframework.beans.factory.ann ...
- CMDB服务器管理系统【s5day87】:需求讨论-设计思路
自动化运维平台愿景和服务器管理系统背景 服务器管理系统 管理后台示例 需求和设计 为什么开发服务器管理系统? 背景: 原来是用Excel维护服务器资产,samb服务[多个运维人员手动维护] 搭建运维自 ...
- SpringCloud笔记五:Feign
目录 什么是Feign? 有了Ribbon我还要Feign干嘛? 新建consumer-feign 修改api项目 引入Maven文件 新建feign的接口 启动项目 报错 发泄发泄心情,一个段落 什 ...
- Maven 学习总结 (二) 之 生命周期与插件
五.生命周期与插件 1.Maven有三套独立的生命周期:clean.default和site. clean生命周期的目的是清理项目,default生命周期的目的是构建项目,site生命周期的目的是建立 ...
- vue-resource的使用,前后端数据交互
vue-resource的使用,前后端数据交互 1:导入vue与vue-resource的js js下载: https://pan.baidu.com/s/1fs5QaNwcl2AMEyp_kUg ...