How can i set choose profile image input on right side of input with label instead of "choose file" ->'choose image'

0
votes

i am creating teacher form i want to choose images from gallery for profile , i want to change label and position of "choose image button " on the right side with label of "Choose Image" & label in same input box on left side "please select profile picture " i am using angular and 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;
}
1
htmlcssangularbootstrap-4
You can't change that text, see: stackoverflow.com/questions/5138719/… . Btw, you are missing id="file" on your input. - Ivana Bakija

1 Answers

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

Please try this way. Hope this will help you.. :)