html - 我如何设置选择输入右侧的配置文件图像输入标签而不是 "choose file"->'choose image'

Question

我正在创建教师表格，我想从图库中选择图片作为个人资料，我想更改右侧“选择图片按钮”的标签和位置，以及左侧同一输入框中的“选择图片”标签和标签旁边“请选择个人资料图片”我正在使用 angular 和 bootstrap 4

This is 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>

This is Css.

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

Answer 1

  <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>

请试试这个方法。希望这会帮助你.. :)