style для input type=file

есть кнопка инпут для изображений


для активации доступно всё поле btn-block, а не только сам input, но как сделать прозрачной белую кнопку, так чтоб "обзор..." и "файл не выбран" остались видимыми?

Ответ

Применительно к бутстрапу есть замечательные аддоны от Jasny: jasny-bootstrap. В их составе - стилизованные fileinput'ы (ссылка на документацию). Сам в своих проектах использую бутстрап и эти аддоны.
В случае с изображениями у меня такая верстка:

Добавить фото

Удалить фото

Кажется, что ее много. Это нужно для вывода миниатюры выбранного в инпуте изображения и для смены кнопки "Добавить фото" на "Удалить фото".
Использую совместно с компонентом бутстрапа .media и font-awesome для иконки пустого инпута. Вместо вы можете просто вставить изображение через тег
В дополнение к стилям 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; }
В итоге получаю такой инпут:

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