<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的时候，结构一定要考虑好，就算写完以后也要检查一下，做好做到语义化，精简一点。

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

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