<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美化,自定义上传按钮样式的更多相关文章

  1. 兼容IE8的flash上传框架"uploadify"自定义上传按钮样式的办法

    (uploadify版本:3.2.1 ) 因为公司业务的原因,所做的项目需要兼容IE8,因此做的上传插件无奈选择的是基于flash的uploadify. 由于是基于flash的,所以使用过程中,难以给 ...

  2. 上传按钮样式优化 <input type="file" />

    <html><head><title>上传按钮样式优化</title> <style>.form-element-file-wapper { ...

  3. input按钮上传按钮样式

    主要是定位和不透明度来实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  4. CSS自定义文件上传按钮样式,兼容主流浏览器

    解决办法:使用text文本框及a链接模拟文件上传按钮,并且把文件上传按钮放在他们上面,并且文件上传按钮显示透明.​1.图片​​2. [代码][HTML]代码 <div class="b ...

  5. 自定义上传按钮 <input type="file" name = "file"/> (将file隐藏在button下)

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  6. [k]自定义上传文件按钮样式

    <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> ...

  7. el-upload自定义上传文件,并携带其余参数,且action不报错

    用el-upload组件自定义上传按钮,并携带其余参数,且必传参数action 不报错 <template> <el-col :span="6" :mode=&q ...

  8. css input[type=file] 样式美化,input上传按钮美化

    css input[type=file] 样式美化,input上传按钮美化 参考:http://www.haorooms.com/post/css_input_uploadmh

  9. input type=file 上传文件样式美化(转载)

    input type=file 上传文件样式美化 来源:https://www.jianshu.com/p/6390595e5a36 在做input文本上传时,由于html原生的上传按钮比较丑,需要对 ...

随机推荐

  1. sublime 官方正版,自己用的插件配置,最轻量级安装流程

    到了一家新公司,新的办公电脑,移动工作站哦,配置很酷.需要自己安装编码环境,node.js(http-server)是必须要装的,编辑器个人比较喜欢sublime,现在归纳一下配置流程,ps:本人有点 ...

  2. 该错误的解决办法:Incorrect string value: '\xF0\x9F...' for column 'XXX' at row 1

    Incorrect string value: '\xF0\x9F...' for column 'XXX' at row 1 这个问题,原因是UTF-8编码有可能是两个.三个.四个字节.Emoji表 ...

  3. EntityFramework Core笔记:表结构及数据基本操作(2)

    1. 表结构操作 1.1 表名 Data Annotations: using System.ComponentModel.DataAnnotations.Schema; [Table("R ...

  4. LDOOP ADD_PRINT_TEXT多页项

    纯文本打印(ADD_PRINT_TEXT)项超过宽度且高度不够的情况下,不会隐藏后面的内容,而是会分到下一页.分页数量和每页显示内容多少 和设置的纯文本打印项高度有关.LODOP.SET_PRINT_ ...

  5. Javascript初识之数据类型

    一.JavaScript概述 1.ECMAScript和JavaScript的关系 1996年11月,JavaScript的创造者--Netscape公司,决定将JavaScript提交给国际标准化组 ...

  6. HTML div 盒子 添加/删除——浮层

    1.clear语法:clear : none | left|right| both 2.clear参数值说明:none : 允许两边都可以有浮动对象both : 不允许有浮动对象left : 不允许左 ...

  7. Java集合:HashMap底层实现和原理(源码解析)

    Note:文章的内容基于JDK1.7进行分析.1.8做的改动文章末尾进行讲解. 一.先来熟悉一下我们常用的HashMap: 1.概述 HashMap基于Map接口实现,元素以键值对的方式存储,并且允许 ...

  8. Lightning Conductor 洛谷P3515 决策单调性优化DP

    遇见的第一道决策单调性优化DP,虽然看了题解,但是新技能√,很开森. 先%FlashHu大佬,反正我是看了他的题解和精美的配图才明白的,%%%巨佬. 废话不多说,看题: 题目大意 已知一个长度为n的序 ...

  9. Tomcat 部署java web项目直接ip地址访问项目

    正常情况下,在访问在Tomcat中部署的项目是 http://localhost:8080/demo 方式 其中,IP,端口,项目名(Demo)都是必须的. 那么,怎么样才能通过 http://loc ...

  10. (二叉树 递归) leetcode 144. Binary Tree Preorder Traversal

    Given a binary tree, return the preorder traversal of its nodes' values. Example: Input: [1,null,2,3 ...