Применительно к бутстрапу есть замечательные аддоны от Jasny: jasny-bootstrap. В их составе - стилизованные fileinput'ы (ссылка на документацию). Сам в своих проектах использую бутстрап и эти аддоны.
В случае с изображениями у меня такая верстка:
<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>
Кажется, что ее много. Это нужно для вывода миниатюры выбранного в инпуте изображения и для смены кнопки "Добавить фото" на "Удалить фото".
Использую совместно с компонентом бутстрапа .media
и font-awesome для иконки пустого инпута. Вместо <span class="fa fa-photo fa-3x text-legend"></span>
вы можете просто вставить изображение через тег <img>
.
В дополнение к стилям jasny-bootstrap, я стилизую конкретно этот инпут:
.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;
}
В итоге получаю такой инпут:

И он же с выбранным изображением:

input[type='file']
нельзя особо кастомизировать, дабы "не ввести пользователя в неведение на что он кликает".