3

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

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

введите сюда описание изображения

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

6
  • никак. обычно скрывают весь инпут полностью
    – Grundy
    3 сен 2016 в 11:00
  • По причинам безопасности, input[type='file'] нельзя особо кастомизировать, дабы "не ввести пользователя в неведение на что он кликает".
    – user207618
    3 сен 2016 в 11:08
  • 1
    @other кастомизировать можно все)
    – user192664
    3 сен 2016 в 11:17
  • @NikitaSmith, я не сказал что совсем нельзя. Но бОльшую часть стилей этот вид инпута игнорирует.
    – user207618
    3 сен 2016 в 11:27
  • @NikitaSmith, скрыть элемент - это не значит - кастомизировать :)
    – Grundy
    3 сен 2016 в 12:04

2 ответа 2

2

Самое красивое и разумное решение, которое есть на данный момент:

Нажми на меня

ps. Можете изменять все элементы на свой вкус

4
  • Ответы-ссылки не приветствуются тут.
    – user207618
    3 сен 2016 в 11:29
  • @Other ты предлагаешь выложить все вариации? Я не против конечно, но весь объем я не смогу захватить в один ответ, а ресурс написал на простом английском и имеет доступное решение.
    – user192664
    3 сен 2016 в 11:31
  • Я ничего не предлагаю, а только говорю что ответы-ссылки не любят, т. к. сторонний ресурс умрёт и Ваш ответ будет совершенно бесполезен.
    – user207618
    3 сен 2016 в 11:35
  • @Other Я понял вас, домой приеду выложу кусок решения.
    – user192664
    3 сен 2016 в 11:40
0

Применительно к бутстрапу есть замечательные аддоны от 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;
}

В итоге получаю такой инпут:

введите сюда описание изображения

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

введите сюда описание изображения

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.