there is an input button for images

& lt; input type = "file" class = "btn btn-primary btn-block" name = "photo" & gt;

the entire btn-block field is available for activation, not just the input itself, but how to make the white button transparent so that the “browse …” and “file not selected” remain visible?

Answer 1

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

In the case of images, my layout is as follows:

& lt; div class = "form-group" & gt;
  & lt; div class = "media text-center fileinput fileinput-new" data-provides = "fileinput" & gt;
    & lt; div class = "media-object fileinput-new" data-trigger = "fileinput" & gt; & lt; span class = "fa fa-photo fa-3x text-legend" & gt; & lt; / span & gt; & lt; / div & gt ;
    & lt; div class = "media-object fileinput-exists thumbnail fileinput-preview" data-trigger = "fileinput" & gt; & lt; / div & gt;
    & lt; div class = "media-body media-middle text-legend fileinput-new" data-trigger = "fileinput" & gt;
      & lt; div class = "media-heading" & gt; Add photo & lt; / div & gt;
    & lt; / div & gt;
    & lt; div class = "media-body media-middle text-muted fileinput-exists" data-dismiss = "fileinput" & gt;
      & lt; div class = "media-heading" & gt; Remove photo & lt; / div & gt;
    & lt; / div & gt;
    & lt; input accept = "image / png, image / gif, image / jpeg" class = "form-control-invisible" type = "file" name = "ad [photo]" id = "ad_photo" & gt;
  & lt; / div & gt;
& lt; / div & gt;

There seems to be a lot of it. This is necessary to display a thumbnail of the image selected in the input and to change the “Add photo” button to “Delete photo”.

Used with the .media bootstrap component and font-awesome for the icon empty input. Instead of & lt; span class = "fa fa-photo fa-3x text-legend" & gt; & lt; / span & gt; you can simply insert an image via the & lt; img & gt; tag .

In addition to the jasny-bootstrap styles, I’m styling 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 the following input:

And the same with the selected image:

Answer 2, authority 92%

The most beautiful and sane solution currently available:

Click me

ps. You can change all the elements to your liking