Пользовательская кнопка загрузки

Question

Привет, мне просто интересно, как вы можете создать свою собственную кнопку загрузки файла, потому что лучшее, что я могу сделать, это

, и то, чего я хочу достичь, это

если что-то и будет, я был бы очень благодарен, и, пожалуйста, могу ли я получить ответы, объясняющие, как это сделать с помощью кода, а не ответы со ссылками на веб-сайты, которые позволяют вамчтобы скачать кнопку или что-то в этом роде, спасибо:)

Answer 1

Хотя некоторые из этих ответов создадут нечто, похожее на то, что вы хотите, чтобы оно работало, они сломаются, когда попытаются выполнить то, что вы ожидаете.Ввод файла напрямую не подходит, и у вас возникнут проблемы при его попытке.Однако есть хитрость.

Хитрость заключается в том, чтобы установить непрозрачность входа на 0, а затем изменить фон под ним на нужный вам стиль кнопки.

.file_button_container,
.file_button_container input {
     height: 47px;
     width: 263px;
 }

 .file_button_container {
     background: transparent url(http://i.stack.imgur.com/BT5AB.png) left top no-repeat;
 }

 .file_button_container input {
     opacity: 0;
 }

<div class="file_button_container"><input type="file" /></div>

Answer 2

Я думаю, вы также можете попробовать сделать это следующим образом:Создание дополнительного элемента <label for="X"></label>, который можно легко стилизовать с помощью CSS

<div class="container">
  <label for="upload" class="uploadButton">Upload</label>
  <input type="file" name="upload" id="upload">
</div>

как

.container {
  position: relative;
}
.uploadButton {
  height: 25px;
  width: 66px;
  display: block;
  cursor: pointer;
  background: url('http://www.ifunia.com/images/christmas/youtube-upload-button.gif') center center no-repeat;
}
input[type="file"] {
  display: block;
  width: 66px;
  height: 25px;
  clip: rect(0px 0px 0px 0px);
  position: absolute;
  left: 0;
  top: 0;
}

<form>
  <div class="container">
    <label for="upload" class="uploadButton"></label>
    <input type="file" name="upload" id="upload" required />
  </div>
  <hr/>
  <button type="submit">Submit</button>
</form>

Answer 3

Вот приблизительное значение нужной кнопки с помощью css / html

HTML

<button class="upload">Choose a file to upload...</button>

CSS

.upload{
    border:0;
    padding:10px 20px;
    -moz-border-radius:10px;
    border-radius:10px;
    background-color:#4488ee;
    color:white;
    font-size:16px;
}

демо http://jsfiddle.net/gaby/qdX5d/2/

для закругленных углов при использовании до IE9 css3pie

Answer 4

Стрелка - это не то, что вы можете «просто делать с кодом», а закругленные углы будут хорошо работать в Firefox, но не при использовании CSS, если вам просто нужно использовать собственное изображение, это просто:

css:

#my_upload_button{
  background-image:url(path-to-file.png);
  border:none;
}

Answer 5

Используйте CSS для стилизации кнопки по ее идентификатору или классу.

Это может помочь: http://speckyboy.com/2009/05/27/22-css-button-styling-tutorials-and-techniques/

Answer 6

Я слишком поздно, чтобы ответить, но кто-то наверняка найдет это полезным в будущем, нет необходимости использовать Javascript или скрытое поле тоже. Если вы используете Bootstrap, то, безусловно, нет необходимости в btn CSS.

#upload_file 
{
    display: none;
}

.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
    color: #fff;
}

.btn {
    -moz-user-select: none;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    display: inline-block;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    padding: 0.375rem 0.75rem;
    text-align: center;
    transition: color 0.15s ease-in-out 0s, background-color 0.15s ease-in-out 0s, border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    vertical-align: middle;
    white-space: nowrap;
}

<label for="upload_file" class="custom-file-upload btn btn-primary"><i class="fa fa-cloud-upload"></i> File Upload</label>
<input class="margin" type="file" formnovalidate id="upload_file" name="file" accept="*">

Answer 7

Используйте метку ввода в качестве пользовательской кнопки загрузки:

<label for="pic" class="uploadfilelabel" >upload </label>
<input type="hidden" name="MAX_FILE_SIZE" value="110000">
<input id="pic" name="pic" type="file" size="110000">

и CSS:

 label.uploadfilelabel{/*custom label here*/}
 input[type=file]{display:none;}

Обратите внимание, что мы не отображали основную кнопку ввода, поскольку в противном случае она будет занимать место

Answer 8

Шаг 1. Создайте простую HTML-разметку

<div class="fileUpload btn btn-primary">
    <span>Upload</span>
    <input type="file" class="upload" />
</div>

Шаг 2. CSS: хитрая часть

.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

Демонстрацию смотрите здесь http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/