我该如何设置在输入的右侧选择带有标签而不是“选择文件”的个人资料图片->“选择图片”

时间:2019-11-07 08:38:09

标签: html css angular bootstrap-4

我正在创建教师表格,我想从图库中选择图片作为配置文件,我想更改右侧的“选择图片按钮”的标签和位置,并在左侧的同一输入框中更改标签“选择图片”侧面“请选择个人资料图片”我正在使用角度和自举4

  

这是html

                  <div class="form-group ">
                    <p class="input-group">
                        <i class="fa fa-camera fa-2x  user-icon fa-fw" aria-hidden="true"></i>
                        <label for="file">Choose file to upload</label>
                        <input type="file" name="pic" accept="image/* "  class="form-control">
                     </p> 
                   </div>
  

这是CSS。

.form-control{
    background: #000;
    color: beige;
}

1 个答案:

答案 0 :(得分:0)

  <div class="form-group ">
    <p class="input-group">
        <i class="fa fa-camera fa-2x  user-icon fa-fw" aria-hidden="true"></i>
        <label for="file" class="col-sm-10 form-control">Choose file to upload</label>
        <input type="file" name="pic" accept="image/* "  class="col-sm-2 form-control">
     </p> 
   </div>

请尝试这种方式。希望这会对您有所帮助。:)