如果想使各浏览器下的表现形式相同,需要对该input元素隐藏,然后再改元素下方添加标签。其html写法如下

<div class="input-file">
<input  type="file" name="postImg" value="上传图片" id="upload" class="file-button">
<label class="file-button-img">上传封面</label>
</div>

css布局如下

.input-file{
display: inline-block;
height:50px;
width: 120px;
/*background-color: #56F06F;*/
text-align: center;
cursor: pointer;
position:relative;
} .file-button{
opacity: 0;
position: absolute;
left:0;
top:0;
width:120px;
height: 50px; } .file-button-img{
line-height: 50px;
text-align: center;
display: inline-block;
margin-top: 5px;
color:#fff;
font-size: 18px;
width:100%;
height:100%;
display: block;
cursor:pointer;
background-color: #3EF5B1;
}

当input中的type值为file时,各浏览器的表现形式不同的更多相关文章

  1. js下读取input中的value值

    很多人(包括我),总想像以前操作js一样,读取到input中的值:document.getElementById('').value; 结果事实证明这样读到得是null. eval(document. ...

  2. 【Python】如何取到input中的value值?

    练习:取到下方链接下所有海贼王的下载链接. # coding=utf-8 from selenium import webdriver from time import sleep import ke ...

  3. js无法监听input中js改变值的变化

    $(input).on('change',function(){ }) 当使用$(input).val('...');不会触发它的change事件 解决办法一:在改变它的值后,手动触发input的ch ...

  4. MyBatis SQL配置文件中使用#{}取值为null时却不报错的解决方案。

    原因是因为#{kh_id} 这个参数名为小写,我之前写成了大写{#KH_ID}所以取不到值

  5. 笔记:HTML5中input元素新增的type值

    在HTML5中,input元素的type值增加了不少,使input的功能强大了很多. 但在各大浏览器中并不是所有的type值都支持. 以下是比较有用.并且浏览器支持的稍好一些的值: type=colo ...

  6. 实现滑动条与表单中的input中的value交互

    最近在写一个考试系统的项目,遇到一些比较有意思的小知识,在这里分享给大家 下面是一个滑动条与input中的value值的交互,即滑动条的颜色会跟随给定input的value值实时变化,虽然表单中的ra ...

  7. input中autocomplete属性

    autocomplete="off":表示刷新页面时,input中的value值清空 <input type="text" id="q" ...

  8. python3 提取http请求response中的某个值

    在使用python3 request做接口测试的时候,想获取response的json中的某个值做断言时,发现request好像没有相关的方法 所以只好自己找写一个了.在我看来,json就是一个字典, ...

  9. 你知道JavaScript中的结果值是什么吗?

    你知道JavaScript中的每条语句.甚至表达式都有一个结果值吗? 当你在浏览器中测试代码时,经常会在控制台的输出结果的最后面多出一条,大部分为undefined,这个undefined就是一个结果 ...

随机推荐

  1. IO分类

    按流向分类: 输入流 读取数据 FileReader Reader 输出流 写入数据 FileWriter Writer 按数据类型分类: 字节流 字节输入流 读取数据 InputStream 字节输 ...

  2. mapreduce 学习笔记

    mapreduce基础概念 mapreduce是一个分布式计算框架(hadoop是mapreduce框架的一个免费开源java实现). mapreduce要点 主节点(master node)控制ma ...

  3. Food Delivery ZOJ - 3469(区间dp)

    题目传送门 题目翻译:当我们专注于解决问题时,我们通常宁愿呆在电脑前而不是外出吃午饭.在这个时候,我们可能会要求提供食物. 假设有N个人生活在一条直线的街道上,它只是位于X坐标轴上.第i个人的坐标是X ...

  4. JavaSE基础知识(5)—面向对象(5.5 this和super关键字)

    一.this关键字 1.说明 this关键字代表当前类的对象,可以访问本类的属性.方法.构造器注意:谁调用该方法,则this就指谁 2.语法 访问属性: this.属性名 = 值; System.ou ...

  5. html模板导出pdf文件

    package com.crc.commonreport.util; import java.awt.Insets; import java.io.ByteArrayOutputStream; imp ...

  6. Vue element 分页

    Vue单页面,有一个带分页的表格,表格内数据关联页码,套路如下: 代码如下: <div class="c-table-list auth-list m-bottom-20"& ...

  7. Unity3D-RayMarch-几何图元-3添加阴影

    效果图: 在RayMarch渲染算法中计算阴影非常简单,当射线碰撞到物体,从碰撞点逆着光源方向再次执行射线步进算法,如果这一过程中碰撞到了其他物体,则碰撞点被其他物体遮挡,该处具有阴影. shader ...

  8. Security.ssl-pinning

    SSL Pinning 1. What's SSL Pinning? "SSL Pinning is making sure the client checks the server’s c ...

  9. apache启动失败

    1.端口被占用 2.路径及文件夹问题(安装路径的文件夹名称中不能为中文)

  10. GUI学习之八——QToolButton的学习总结

    QToolButton提供一个快速的访问按钮,通常在工具栏内使用,一般不显示文本标签而显示图标. 一.按钮的样式风格设置 可以按照下面的风格对按钮进行样式设置 从左到右依次是仅显示图标.仅显示文字.图 ...