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

Question

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

You can't change that text, see: https://stackoverflow.com/questions/5138719/change-default-text-in-input-type-file . Btw, you are missing _id="file"_ on your input. — Ivana Bakija, Nov 07 '19 at 08:50

score 0 · Answer 1 · answered Nov 07 '19 at 08:45

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>

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

answered Nov 07 '19 at 08:45

Pranav MS

2,235
2
23
50

Thanks Pranav MS this is answer or half of my question . Can i change text of "choose file " choose image ? – Saad Abbasi Nov 07 '19 at 09:35

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

1 Answers1