小编Use*_*113的帖子

如何隐藏输入文件并将input =“ file”设置为图标/图像的样式

我想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;}
Run Code Online (Sandbox Code Playgroud)
<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>
Run Code Online (Sandbox Code Playgroud)

html javascript css

5
推荐指数
2
解决办法
1922
查看次数

标签 统计

css ×1

html ×1

javascript ×1