<input type="file"> 与label搭配会产生多大的影响

前面我写过关于<input type="file">上传图片,消除原有样式,获取图片的文章。

今天更新的是我最近发现,点击上传按钮的那一整行都可以调出本地上传图片的窗口。

之前也是发现多一个INPUT 的影响区域,用下面的方法清除了。

“用过两次都发现页面自动生成另一个大的<input>,点击同样会弹出文件选择框,可以用下面的代码清除这个多的。

input[type="file" i]::-webkit-file-upload-button {
-webkit-appearance: push-button;
white-space: nowrap;
font-size: inherit;
-webkit-user-modify: read-only;
margin: 0px;
display:none;//主要是这个
}”

再遇到的时候,以为是没清除成功,但是,右键检查找不到这个区域。

百思不得其解。

一行一行检查代码突然看到了LABEI标签,好像应该可能是他的原因。

改LABEI为DIV后,

一切正常了。

贴出,原错误代码:

<label class="choseImglabel">
<strong class="choseImgTitle">封面</strong>
<p class="choseNotice">小图片建议尺寸:200像素 * 200像素</p>
<div class="uploadType">
<a class="btn_upload">从图片库选择
<input type="file" id="camera" accept="image/*"/></a>
<span id="saveBtn" class="saveBtn"><button type="button" onclick="uploadImg()">保存图片</button></span>
</div>
</label>

看这个HTML会发现,标签完全用错了。这个label出现的毫无意义,我也不知道当时怎么用了一个label。。。。

将label改成DIV即可。

原因,我猜想可能是<label><input/></label>这种label标签中包含了input,点击label的整个区域会调用input。

将label的闭合标签移到<strong>前面去。试一试。

没错,再次点击label的区域是不会弹出图片选择窗口的,只有点击INPUT 的时候才会出现。

虽然不知道是不是我想的那个原因,但结果好像符合的。

写HTML的时候,结构一定要考虑好,就算写完以后也要检查一下,做好做到语义化,精简一点。

很多人说不要管为什么,实现了就好。

但是我觉得,应该要往前再想一想。填鸭式的学习又怎么好消化吸收转化为自己的知识呢。

时间: 2024-10-27 18:00:32

<input type="file"> 与label搭配会产生多大的影响的相关文章

文件上传按钮input[type=&quot;file&quot;]按钮美化时在IE8中的bug【兼容至IE8】

首先看一下完成后的效果,鼠标移入可改变为手指的效果. 在此就不加图标了 <label class="file-upload"> <span>上传附件</span> <input type="file" name=""> </label> 在IE8中需要将input透明后还不能完全达到效果,还需要将字体设大一些,撑开input,这是IE自带的兼容问题. .file-upload{ disp

自定义input[type=&quot;file&quot;]的样式

input[type="file"]的样式在各个浏览器中的表现不尽相同: 1. chrome: 2. firefox: 3. opera: 4. ie: 5. edge: 另外,当我们规定 input[type="file"] 的高度,并把它的行高设置成与其高度相等后,chrome中难看的样式出现了: “未选择任何文件”这一行并没有竖直居中. 似乎在 firefox 中好看一些,嗯,我比较喜欢用 firefox.但是这些浏览器中的表现不一致,我们必须做兼容处理. 思

将html中的&lt;input type=&quot;file&quot; /&gt;(选择文件) 元素隐藏,并通过其它方式触发点击。

file input的默认外观实在不好看,所以我们要搞定它.. 1. 首先,我们把file input放入一个label,并且将这个label显示为一定的宽高,比如显示为(bootstrap)btn的样式; 2. 为此input增加样式,内联或css文件内写都可以:style="left:-9999px;position:absolute;" 3. 在label内增加文本(作为label btn的显示文本),比如下方示例中的span; <label id="realBt

原来样式改变不了(input type=&quot;file&quot;)

label { background-color: #979fa8; color: #fff; display: inline-block; padding: .8rem 4rem; cursor: pointer; margin-bottom: 1rem; position: relative; overflow: hidden; text-align: center } span { cursor: pointer } input[type="file"] { display: n

原生HTML5 input type=file按钮UI自定义

原生<input type="file" name="file" />长得太丑 提升一下颜值 实现方案一.设置input[type=file]透明度为0,使用绝对定位遮罩在自定义的按钮标签层的之上. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>原生HTML5 input typ

HTML5学习笔记(2):input type file的特性

一. input type=file与文件上传 本文所说的input type=file指的是type类型是file的input元素,最简HTML代码如下: <input type=file> 但是,为了习惯,我们多写成: <input type="file"> 在HTML5出现之前(XHTML),我们的闭合规则则有些出入: <input type="file" /> 顾名思义,选择文件,并上传文件. 在HTML5还没有出现之前,

jquery-fileupload IE8IE9无法上传图片的BUG及如何给input[type=file]自定义样式

先说IE9,点击上传后,浏览器会提示下载内容. 原因:IE9及以下上传文件的响应头的contentType 如果是json,浏览器会以为是文件下载. 处理方法:找后台GG,把contentType改为text/html. 再修改done方法,获得地址 done: function(e, data){ var result = data.result[0].body ? data.result[0].body.innerHTML : data.result; result = JSON.parse

jQuery动态添加input type=file文件上传域

jQuery动态添加input type=file文件上传域,当用户需要通过网页上传多个文件的时候,动态添加文件域就显得尤其重要,本功能引入了jQuery,兼容性方面也做的不错,暂时没有限制文件域的个数,所以你可以无限制的生成文件域,直到满足你的需要. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transit

&lt;input type=&quot;file&quot;&gt;图片上传时,先预览

<label> <input type="file" id="upload"> </label> js $("#upload").on('change',function(){ var file = this.files[0]; console.log(this.files); var reader = new FileReader(); //读取文件过程方法 reader.onloadstart = func