there is an input button for images

<input type="file" class="btn btn-primary btn-block" name="photo">

enter image description here

For activation, the entire btn-block field is available, not only the input itself, but how to make the white button transparent so that the "review ..." and "file not selected" remain visible?

  • no way. usually hide the entire input completely - Grundy
  • For security reasons, input[type='file'] cannot be specifically customized, in order to "not enter the user into ignorance of what he clicks." - user207618
  • one
    @other can customize everything) - user192664
  • @NikitaSmith, I did not say that it is absolutely impossible. But most of the styles this type of input is ignored. - user207618
  • @NikitaSmith, hide element - it does not mean - to customize :) - Grundy

2 answers 2

For bootstrap, there are some great add-ons from Jasny: jasny-bootstrap . They include stylized file inputs ( link to documentation ). I myself use bootstrap and these addons in my projects.

In the case of images I have this layout:

 <div class="form-group"> <div class="media text-center fileinput fileinput-new" data-provides="fileinput"> <div class="media-object fileinput-new" data-trigger="fileinput"><span class="fa fa-photo fa-3x text-legend"></span></div> <div class="media-object fileinput-exists thumbnail fileinput-preview" data-trigger="fileinput"></div> <div class="media-body media-middle text-legend fileinput-new" data-trigger="fileinput"> <div class="media-heading">Добавить фото</div> </div> <div class="media-body media-middle text-muted fileinput-exists" data-dismiss="fileinput"> <div class="media-heading">Удалить фото</div> </div> <input accept="image/png,image/gif,image/jpeg" class="form-control-invisible" type="file" name="ad[photo]" id="ad_photo"> </div> </div>

It seems that a lot of it. This is necessary to display a thumbnail of the image selected in the input and to change the button "Add photo" to "Delete photo".

I use it in conjunction with the bootstrap component .media and font-awesome for an empty .media icon. Instead of <span class="fa fa-photo fa-3x text-legend"></span> you can simply insert an image through an <img> .

In addition to the jasny-bootstrap styles, I stylize this particular input:

 .fileinput { margin-bottom: 0; } .fileinput .thumbnail { margin-bottom: 0; text-align: initial; } div[data-trigger='fileinput'], div[data-dismiss='fileinput'] { cursor: pointer; } .media.fileinput { background-color: #F7FAFF; border-radius: 4px; border: 1px solid #CCD1C3; overflow: visible; padding: 24px 30px; } .media.fileinput .media-heading { margin-bottom: 0; } .media.fileinput .thumbnail.fileinput-preview { border-radius: 4px; } .media.fileinput .thumbnail.fileinput-preview img { max-height: 200px; max-width: 100%; vertical-align: initial; } .media.fileinput .fileinput-new .img-responsive { border-radius: 4px; border: 1px solid #CCD1C3; max-height: 200px; max-width: 100%; vertical-align: initial; } .media.fileinput .media-left .thumbnail.fileinput-preview.shape-60px { margin: -12px 0; } .media.fileinput.text-center .thumbnail.fileinput-preview { border-radius: 4px; border: 1px solid #CCD1C3; text-align: center; }

As a result, I get this input:

enter image description here

And he with the selected image:

enter image description here

    The most beautiful and reasonable solution that is at the moment:

    Click me

    ps. You can change all the elements to your taste.

    • Responses links are not welcome here. - user207618
    • @Other do you propose to lay out all the variations? I don’t mind, of course, but I won’t be able to capture the entire volume in one answer, but the resource was written in plain English and has an accessible solution. - user192664
    • I offer nothing, but only say that the answers-links do not like, because an external resource will die and your answer will be absolutely useless. - user207618
    • @Other I understand you, I'll come home and lay out a piece of the solution. - user192664