2

Как сделать красивый input type='file' через css и js? Как сделать чтобы при клике button выполняется input?

button {
  background: #333;
  color: #FFF;
  border: none;
  padding: 5px 10px;
}
input {
  visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="upload">
  <button>Upload</button>
  <input type="file" />
</div>

1 ответ 1

2

Непосредственно input изменить не получится, но можно его убрать и работать с ним опосредованно.

Можно подсмотреть на jQuery-File-Upload demo

Делаем кнопку, внутрь вставляем название кнопки и input.

<span class="btn btn-success fileinput-button">
    <span>Select files...</span>
    <!-- The file input field used as target for the file upload widget -->
    <input id="fileupload" name="files[]" multiple="" type="file">
</span>

Прячем и предусмотрительно увеличиваем input:

.fileinput-button input {
    cursor: pointer;
    font-size: 200px;
    position: absolute;
    top: 0px;
    right: 0px;
    margin: 0px;
    direction: ltr;
    opacity: 0;
}

Теперь он невидим и занимает все пространство кнопки. demo

Второй способ:

<input type="file" id='upload' />
<label for="upload" class="button">Upload</label>

css:

#upload{
  display: none;
}

demo

Теперь можно настраивать внешний вид кнопки произвольным образом.

0

Ваш ответ

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

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