如果想使各浏览器下的表现形式相同,需要对该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. css第四天

    四丶 补充:CSS Display(显示) 与 Visibility(可见性) display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏. 隐藏元素 - displ ...

  2. VS2019正式版注册码秘钥

    Visual Studio 2019 EnterpriseBF8Y8-GN2QH-T84XB-QVY3B-RC4DF Visual Studio 2019 ProfessionalNYWVH-HT4X ...

  3. DOM节点遍历

    "DOM2级遍历和范围"模块定义了两个用于辅助完成顺序遍历DOM结构的类型:NodeIterator 和 TreeWalker .这两个类型能够根据给定的节点对DOM结构进行深度优 ...

  4. CodeWarrior 10 配置Jlint初始化文件

    新建一个项目之后,飞思卡尔的仿真器的配置不如德州仪器那么简单.他需要一些配置. 当我们新建一个工程后,可以采取如下步骤配置Jlint: 1.右击工程名,选择属性. 2.在Run/Debug Setti ...

  5. 利用百度编辑器和IIS限制文件上传的大小

    1.百度编辑器的大小限制 针对不同的文件类型限制大小 例如图片是imageMaxSize ,依次类推 /* 前后端通信相关的配置,注释只允许使用多行方式 */ {     /* 上传图片配置项 */ ...

  6. ToastUtils 工具类

    package com.example.grenaderose.redthunder.utils; import android.content.Context; import android.os. ...

  7. JS-正则表达式 限制输入整数、小数

    //只可以输入整数 onkeyup="value=value.replace(/[^\d]/g,'')" //可以输入数字 包括小数 onkeyup="value=val ...

  8. div轮流滚动显示

    window.onload = function(){ var _box1 = document.getElementById("box1"); var _box2 = docum ...

  9. LAB12 Transaction

    思路:就是把aotocommit()里面的东西改改就行了. 查询要求可用房间>=所需要的房间. SQL里面查数字时,不要加单引号.字符串才要. 查询里的set ONHAND=要改成自己的变量名s ...

  10. 【python路飞】编码 ascii码(256位 =1个字节)美国;unicode(万国码)中文 一共9万个 用4个字节表示这9万个子 17位就能表示

    8位一个字节  1024字节 1KB   1024KB 1MB ASCII码不能包含中文.创建了unicode,一个中文4个字节.UTF-8一个中文3个.GBK中国人用的只包含中文2个字节 升级 Un ...