我希望隐藏 input="file"
并使用图标设置 input="file"
的样式,然后单击图标选择图像。
.cover_photo {width:100%; height:250px; overflow:hidden; position:relative;}
.cover_photo img {width:100%;}
.upload_btn { position:absolute; top:0; left:0;}
.upload_btn input[type="file"] {display:none;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<section>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="cover_photo">
<img class="img-responsive" src="http://underafricanskiessafaris.co.za/wp-content/uploads/2015/02/BG-1.jpg" />
<div class="upload_btn">
<form>
<i id="icon_upload" class="fa fa-camera"></i>
<input type="file" name="cover-photo" id="icon_upload" />
</form>
</div>
</div>
</div>
</div>
</div>
</section>
最佳答案
带标签
#fileInput{
display: none;
}
#icon{
width: 100px;
cursor: pointer;
}
<label for="fileInput">
<img id="icon" src="https://image.freepik.com/free-icon/upload-arrow_318-26670.jpg">
</label>
<input id="fileInput" type="file">
关于javascript - 如何隐藏输入文件并将输入 ="file"设置为图标/图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44173593/