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

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

enter image description here

и я хочу достичь

enter image description here

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

Ответы

Ответ 1

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

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

Учитывая этот html:

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

Используйте этот css:

  .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;
   }

Здесь он находится в действии: http://jsfiddle.net/t6EKv/1/

Ответ 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>

Ответ 4

Стрелка не является чем-то, что вы можете "просто делать с кодом", и закругленные углы будут отлично работать в firefox, но не в использовании css... если вам просто нужно легко использовать пользовательский образ:

CSS

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

Ответ 5

Вот приблизительная кнопка, которую вы хотите использовать 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;
}

demo http://jsfiddle.net/gaby/qdX5d/2/

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

Ответ 6

Шаг 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/

Ответ 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;}

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