如何在输入右侧使用标签而不是“选择文件”->“选择图像”设置选择个人资料图像输入答案

【问题标题】：How can i set choose profile image input on right side of input with label instead of "choose file" ->'choose image'如何在输入右侧使用标签而不是“选择文件”->“选择图像”设置选择个人资料图像输入
【发布时间】：2020-03-03 19:16:35
【问题描述】：

我正在创建教师表格我想从图库中选择图像作为个人资料，我想更改右侧“选择图像按钮”的标签和位置，并在左侧的同一输入框中使用“选择图像”标签和标签侧面“请选择个人资料图片”我正在使用 angular 和 bootstrap 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;
}

【问题讨论】：

您无法更改该文本，请参阅：stackoverflow.com/questions/5138719/…。顺便说一句，您的输入中缺少 id="file"。

标签： html css angular bootstrap-4

【解决方案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>

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

【讨论】：

感谢 Pranav MS，这是我的问题的答案或一半。我可以更改“选择文件”选择图像的文本吗？