input元素type=file中cursor:pointer无效

遇到file元素设置cursor:pointer无效的情况,经测试,在chrome下可以通过设置font-size:0;解决

input[type='file']{
    cursor: pointer;
    font-size: 0;
}

 

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
<div class="form-group"> <label class="col-sm-3 control-label">任务图标</label> <div class="col-sm-6"> l<input type="file" id="iconInput" class="image-input" style="display: none;"> <img id="previewIcon" class="preview-image" src="taskimg/task01.svg" alt="默认图片" width="50px" height="50px" style="cursor: pointer;" onclick="selectImage('iconInput', 'previewIcon')"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">任务图片</label> <input type="file" id="imageInput1" class="image-input" style="display: none;"> <img id="previewImage1" class="preview-image" src="images/tianjia.png" alt="默认图片" width="150px" height="200px" style="cursor: pointer;" onclick="selectImage('imageInput1', 'previewImage1')"> <input type="file" id="imageInput2" class="image-input" style="display: none;"> <img id="previewImage2" class="preview-image" src="images/tianjia.png" alt="默认图片" width="150px" height="200px" style="cursor: pointer;" onclick="selectImage('imageInput2', 'previewImage2')"> <input type="file" id="imageInput3" class="image-input" style="display: none;"> <img id="previewImage3" class="preview-image" src="images/tianjia.png" alt="默认图片" width="150px" height="200px" style="cursor: pointer;" onclick="selectImage('imageInput3', 'previewImage3')"> </div> <div class="form-group"> <label class="col-sm-3 control-label">示例图片</label> <input type="file" id="imageInput1" class="image-input" style="display: none;"> <img id="previewImage1" class="preview-image" src="images/tianjia.png" alt="默认图片" width="150px" height="200px" style="cursor: pointer;" onclick="selectImage('imageInput1', 'previewImage1')"> <input type="file" id="imageInput2" class="image-input" style="display: none;"> <img id="previewImage2" class="preview-image" src="images/tianjia.png" alt="默认图片" width="150px" height="200px" style="cursor: pointer;" onclick="selectImage('imageInput2', 'previewImage2')"> <input type="file" id="imageInput3" class="image-input" style="display: none;"> <img id="previewImage3" class="preview-image" src="images/tianjia.png" alt="默认图片" width="150px" height="200px" style="cursor: pointer;" onclick="selectImage('imageInput3', 'previewImage3')"> </div> <script> function selectImage(inputId, imageId) { document.getElementById(inputId).click(); document.getElementById(inputId).onchange = function(event) { previewImage(event, imageId); } } function previewImage(event, imageId) { var input = event.target; var reader = new FileReader(); reader.onload = function() { var image = document.getElementById(imageId); image.src = reader.result; } reader.readAsDataURL(input.files[0]); } </script>请修正一下以上代码的问题,修改后点击每一个图片,可以选择本地图片并更换默认图片显示
07-09
以下是修正后的代码: ```html <div class="form-group"> <label class="col-sm-3 control-label">任务图标</label> <div class="col-sm-6"> <input type="file" id="iconInput" class="image-input" style="display: none;"> <img id="previewIcon" class="preview-image" src="taskimg/task01.svg" alt="默认图片" width="50px" height="50px" style="cursor: pointer;" onclick="selectImage('iconInput', 'previewIcon')"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">任务图片</label> <div> <input type="file" id="imageInput1" class="image-input" style="display: none;"> <img id="previewImage1" class="preview-image" src="images/tianjia.png" alt="默认图片" width="150px" height="200px" style="cursor: pointer;" onclick="selectImage('imageInput1', 'previewImage1')"> </div> <div> <input type="file" id="imageInput2" class="image-input" style="display: none;"> <img id="previewImage2" class="preview-image" src="images/tianjia.png" alt="默认图片" width="150px" height="200px" style="cursor: pointer;" onclick="selectImage('imageInput2', 'previewImage2')"> </div> <div> <input type="file" id="imageInput3" class="image-input" style="display: none;"> <img id="previewImage3" class="preview-image" src="images/tianjia.png" alt="默认图片" width="150px" height="200px" style="cursor: pointer;" onclick="selectImage('imageInput3', 'previewImage3')"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">示例图片</label> <div> <input type="file" id="exampleInput1" class="image-input" style="display: none;"> <img id="previewExample1" class="preview-image" src="images/tianjia.png" alt="默认图片" width="150px" height="200px" style="cursor: pointer;" onclick="selectImage('exampleInput1', 'previewExample1')"> </div> <div> <input type="file" id="exampleInput2" class="image-input" style="display: none;"> <img id="previewExample2" class="preview-image" src="images/tianjia.png" alt="默认图片" width="150px" height="200px" style="cursor: pointer;" onclick="selectImage('exampleInput2', 'previewExample2')"> </div> <div> <input type="file" id="exampleInput3" class="image-input" style="display: none;"> <img id="previewExample3" class="preview-image" src="images/tianjia.png" alt="默认图片" width="150px" height="200px" style="cursor: pointer;" onclick="selectImage('exampleInput3', 'previewExample3')"> </div> </div> <script> function selectImage(inputId, imageId) { document.getElementById(inputId).click(); document.getElementById(inputId).onchange = function(event) { previewImage(event, imageId); } } function previewImage(event, imageId) { var input = event.target; var reader = new FileReader(); reader.onload = function() { var image = document.getElementById(imageId); image.src = reader.result; } reader.readAsDataURL(input.files[0]); } </script> ``` 修正的主要问题包括: 1. 移除了多余的字符 "l"。 2. 修改了示例图片部分的id,确保每个图片都有唯一的id。 3. 修改了示例图片部分的input id,确保每个input都有唯一的id。 4. 修改了示例图片部分的onclick函数,确保调用正确的selectImage函数。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值