Добавление стиля к кнопке загрузки файла в css

Ответ 1

Я попробовал это, это выглядит очень хорошо для меня. Есть ли недостатки в этом? Вот ссылка jsfiddle http://jsfiddle.net/Tdkre/1/

#FileUpload {
    position:relative;
}

#BrowserVisible {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    background:url(upload.png) 100% 1px no-repeat;
    width:345px;
    height:30px;
}

#FileField {
    width:250px;
    margin-right:85px;
    padding: 6px;
    font-size: 13px;
    background: #fff url('bg-form-field.gif') top left repeat-x;
    border: 1px solid #d5d5d5;
    color: #333;
    border-radius: 4px 4px 4px 4px !important;
}

#BrowserHidden {
    position:relative;
    width:345px;
    height:30px;
    text-align: right;
    -moz-opacity:0;
    filter:alpha(opacity: 0);
    opacity: 0;
    z-index: 2; 
}

<div id="FileUpload">
<input type="file" size="24" id="BrowserHidden" onchange="getElementById('FileField').value = getElementById('BrowserHidden').value;" />
<div id="BrowserVisible"><input type="text" id="FileField" /></div>

Вот изображения

Ответ 2

Попробуйте это решение: http://jsfiddle.net/JJRrc/1/

Html

<p class="form">
  <input type="text" id="path" />
  <label class="add-photo-btn">upload
    <span>
       <input type="file" id="myfile" name="myfile" />
    </span>
  </label>
</p>

CSS

.form input[type="file"]{
  z-index: 999;
  line-height: 0;
  font-size: 50px;
  position: absolute;
  opacity: 0;
  filter: alpha(opacity = 0);-ms-filter: "alpha(opacity=0)";
  cursor: pointer;
  _cursor: hand;
  margin: 0;
  padding:0;
  left:0;
  }
 .add-photo-btn{
   position:relative;
   overflow:hidden;
   cursor:pointer;
   text-align:center;
   background-color:#83b81a;
   color:#fff;
   display:block;
   width:197px;
   height:31px;
   font-size:18px;
   line-height:30px;
   float:left;
 }
 input[type="text"]{
   float:left;
 }

JQuery

$('#myfile').change(function(){
  $('#path').val($(this).val());
});

Ответ 3

Вы также можете использовать jQuery, например:

<img id="image" style="cursor:pointer;" src="img.jpg" />
<input type='file' style="display:none;" name="photosubmit" id="photosubmit"/>

И этот код jquery

$("#image").click(function(){
 $("#photosubmit").click();
});

Надеюсь, это тоже поможет кому-то!

Ответ 4

попробуйте следующее:

В вашем файле css поместите это в конец файла или где-то еще: input[type="file"]::-webkit-file-upload-button. Этот синтаксис предназначен только для стиля кнопки.

Если вы добавили только: input[type="file"], вы можете создать массив, в котором у вас есть имя файла.

Ответ 5

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

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

Ответ 6

Я запускаю этот относительно короткий jQuery на своей странице, содержащий один или несколько неизменных элементов html <input type="file">.

jQuery будет скрывать элементы и вставлять новые, где это уместно, имитировать то же поведение.

Этот ответ аналогичен другим на странице, но был протестирован в браузерах IE, а также те, разработчик которых на самом деле тратит время на поддержку тщательно рассмотренных веб-стандартов.

$(document).ready(function(){

  // replace all file upload elements for styling purposes
  $('input[type="file"]').each(function(){
    var btn = $('<button class="file">Browse...</button>');
    var txt = $('<span class="file"></span>');
    $(this).after(txt).after(btn);
    $(this).css({display:'none'});
    var target = this;
    $(btn).click(function(ev){ 
      ev.preventDefault(); 
      $(target).click(); 
    })
    $(target).change(function(){
      // IE uses a stupid renaming scheme that includes "fake-path"
      var fname = $(target).val()
      $(txt).html(fname.substr(fname.lastIndexOf('\\')+1));
    });
  });
});

Теперь вам просто нужно стилить button.file и span.file по своему усмотрению, и вам хорошо идти.

Ответ 7

Вот ссылка . Вы можете изменить стиль кнопки.

HTML

<button>upload</button>
<input type="text" id="f" disabled="disabled" />
<input id="html_btn" type='file' " /><br>

CSS

button {
    border-radius:10px;
    padding:5px;
}
#html_btn {
    display:none;
}

Javascript

$('button').bind("click", function () {
    $('#html_btn').click();

});
$('#html_btn').change(function () {
    document.getElementById("f").value = $('#html_btn').val();
});

Ответ 8

Простое решение: пользовательская кнопка загрузки файла только css

.fileUpload input[type=file]{
                display:none;
            }
            .btn{
                background-color:#e3e3e3;
                color:#333;
                border:1px solid #e6e6e6;
                border-radius:3px;
                padding:6px 12px;
                font-size:16px;
            }

<label class="btn fileUpload btn-default">
       Browse <input type="file" hidden="">
</label>