当input中的type值为file时,各浏览器的表现形式不同
如果想使各浏览器下的表现形式相同,需要对该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时,各浏览器的表现形式不同的更多相关文章
- js下读取input中的value值
很多人(包括我),总想像以前操作js一样,读取到input中的值:document.getElementById('').value; 结果事实证明这样读到得是null. eval(document. ...
- 【Python】如何取到input中的value值?
练习:取到下方链接下所有海贼王的下载链接. # coding=utf-8 from selenium import webdriver from time import sleep import ke ...
- js无法监听input中js改变值的变化
$(input).on('change',function(){ }) 当使用$(input).val('...');不会触发它的change事件 解决办法一:在改变它的值后,手动触发input的ch ...
- MyBatis SQL配置文件中使用#{}取值为null时却不报错的解决方案。
原因是因为#{kh_id} 这个参数名为小写,我之前写成了大写{#KH_ID}所以取不到值
- 笔记:HTML5中input元素新增的type值
在HTML5中,input元素的type值增加了不少,使input的功能强大了很多. 但在各大浏览器中并不是所有的type值都支持. 以下是比较有用.并且浏览器支持的稍好一些的值: type=colo ...
- 实现滑动条与表单中的input中的value交互
最近在写一个考试系统的项目,遇到一些比较有意思的小知识,在这里分享给大家 下面是一个滑动条与input中的value值的交互,即滑动条的颜色会跟随给定input的value值实时变化,虽然表单中的ra ...
- input中autocomplete属性
autocomplete="off":表示刷新页面时,input中的value值清空 <input type="text" id="q" ...
- python3 提取http请求response中的某个值
在使用python3 request做接口测试的时候,想获取response的json中的某个值做断言时,发现request好像没有相关的方法 所以只好自己找写一个了.在我看来,json就是一个字典, ...
- 你知道JavaScript中的结果值是什么吗?
你知道JavaScript中的每条语句.甚至表达式都有一个结果值吗? 当你在浏览器中测试代码时,经常会在控制台的输出结果的最后面多出一条,大部分为undefined,这个undefined就是一个结果 ...
随机推荐
- wkhtmltopdf 转pdf时元素被页面切割开
1. <style> * { page-break-inside: avoid; page-break-after: avoid; page-break-before: avoid; } ...
- Python-cookie,session
前言: 其实cookie这个词对于我们并不陌生,经常就听见说网页加载慢了,清理一下浏览器的缓存和cookie,cookie就是一个特殊数据验证类型,一般存储在客户端的浏览器上面,比如我们登录某宝后,下 ...
- Idea书签管理器的使用
1. 添加书签 以光标所在的行,为落点, 方式一: F11 , 添加一个默认的书签 方式二:Crtl + Shift + 数字 , 添加一个带编号 的书签 2. 查看书签 方式一:Shift + F1 ...
- Django最简单的从请求过程
1,url匹配,匹配路由,由理由分发器(urls.py)查找用户请求的url对应关系 1,找到业务函数就调用(views.py中的方法) 2,找不到就报404错误, 3,将数据返回给浏览器 ...
- pwnable.kr-input-witeup
查看代码,有5个stage,一一解决掉就能愉快看到flag了. 第一个stage: 解决方案: 第二个stage: 解决方案: 使用了os.pipe()函数功能,os.pipe()用于创建一个管道,返 ...
- spring mvc 映射与适配器
在深入学习Spring mvc 过程中,我们需要了解如下两个类: org.springframework.web.servlet.mvc.method.annotation.RequestMappin ...
- 52-python 画图二维
Python--matplotlib绘图可视化知识点整理 1.折线图: import numpy as np import matplotlib.pyplot as plt from pylab im ...
- 避免切换横竖屏Fragment的重复加载导致UI混乱
当我们切换横竖屏时 Activity的生命周期就会重走一遍,自然 其中的Fragment的生命周期也就重新走了一遍,实践证明 当熄屏 再开屏时 Fragment的生命周期也会重走一遍 解决方案: an ...
- ubuntu 环境下 安装虚拟环境
sudo pip3 install virtualenv 安装虚拟环境 sudo pip3 instal virtualenvwrapper #安装虚拟环境扩展包 编辑home目录下面的.bashrc ...
- JS判断一个数组中有无重复元素(数字)
前段时间遇到了这个问题 也百度了很多 不过还是用自己的方法解决了 一个超级简单的方法 简单到令人发指 由于直接写文本太丑了 所以还是截图吧 嘻嘻嘻 假如有一个这样的数组 (这是假如 可能每个人的数据 ...