当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就是一个结果 ...
随机推荐
- Idea使用maven搭建SpringMVC框架
https://www.cnblogs.com/shang-shang/p/7477607.html
- 在同时满足if 和 else 条件的情况下,输出所需的内容。
请问划线处填什么内容,可以输出 "Hello World!"?if(__________){ printf("Hello ");}else{ pri ...
- step_by_step_记录deepin下curl安装过程
记录 deepin 下 curl 安装过程 wget https://curl.haxx.se/download/curl-7.55.1.tar.gz .tar.gz cd curl-/ ./conf ...
- C#少量数据分页方法
string sql = @"select [Name],[Value],[TypeCode] from [dbo].[SYS_Parameter] WHERE TypeCode = 'Us ...
- CVTE C/C++开发工程师笔试题(二)
问题描述:打印重复元素 给定一个数组,内容可能包含1到N的整数,N最大为40000,数组可能含有重复的值,且N的取值不定.若只剩余5KB内存可用,请设计函数尽可能快的答应数组中所有重复的元素. voi ...
- 基于服务器的AAA配置实验(Cisco PT)
一.实验拓扑 二.网络地址分配 Device Interface IP Address Subnet Mask R1 Fa0/0 192.168.1.1 255.255.255.0 S0/0/0 10 ...
- php操作redis数据库方法总结
一.安装php_redis扩展,用以操作redis http://pecl.php.net/package/redis 选择自已系统php版本对应的扩展. 二.redis连接与验证 <?php ...
- 20175234 2018-2019-2 《Java程序设计》第七周学习总结
目录 20175234 2018-2019-2 <Java程序设计>第七周学习总结 教材学习内容总结 String类常用用法 Date类与Calendar类常用用法 Math类的常用方法 ...
- Synchronized和Lock的区别
①synchronized是jvm的关键字,Lock是Java类: ②synchronized会自动释放锁,而Lock需要在finally语句中主动释放锁,否则会造成死锁 ③用synchronized ...
- Scrapy Spider MiddleWare 设置
# -*- coding: utf-8 -*- # Define here the models for your spider middleware # # See documentation in ...