在css中为文件上传按钮添加样式

Question

我有一个带有以下 css 的文本字段和按钮：

JS小提琴链接：http://jsfiddle.net/Tdkre/

.submit {
      -moz-box-shadow:inset 0px 1px 0px 0px #cae3fc;
      -webkit-box-shadow:inset 0px 1px 0px 0px #cae3fc;
      box-shadow:inset 0px 1px 0px 0px #cae3fc;
      background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #4197ee) );
      background:-moz-linear-gradient( center top, #79bbff 5%, #4197ee 100% );
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#4197ee');
      background-color:#79bbff;
     -moz-border-radius:6px;
     -webkit-border-radius:6px;
     border-radius:6px;
     border:1px solid #469df5;
     display:inline-block;
     color:#ffffff;
     font-family:arial;
     font-size:14px;
     font-weight:bold;
     padding:5px 14px;
     text-decoration:none;
     text-shadow:1px 1px 0px #287ace;
    cursor:pointer;
}
.submit:hover {
     background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4197ee), color-stop(1, #79bbff) );
     background:-moz-linear-gradient( center top, #4197ee 5%, #79bbff 100% );
     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4197ee', endColorstr='#79bbff');
     background-color:#4197ee;
}
 .submit:active {
   position:relative;
   top:1px;
}

 .text-input {
    padding: 6px;
    font-size: 13px;
    border: 1px solid #d5d5d5;
    color: #333;
    border-radius: 4px 4px 4px 4px !important;
 }

<form>
    <input type="text" class="text-input" size="40"/>
    <input type="button" value="Upload" id="upload" class="submit"/>
</form>

我想在文件上传输入类型中添加相同的样式。我是一个CSS初学者。我如何使用这种样式来文件上传按钮？

Answer 1

简单的解决方案：仅使用 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>

Answer 2

这是link。您可以更改按钮的样式。

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();
});

Answer 3

试试这个：

在您的 css 文件中，将其放在文件末尾或其他位置：input[type="file"]::-webkit-file-upload-button。 此语法仅适用于按钮样式。

如果你只放在那里：input[type="file"] 你可以在你有文件名的地方设置数组的样式。

Answer 4

我在包含一个或多个未更改的 html <input type="file"> 元素的页面上运行这个相对较短的 jQuery。

jQuery 将隐藏元素并在适当的地方插入模仿相同行为的新元素。

此答案与页面上的其他答案相似，但已在 IE 浏览器以及开发人员实际上花时间支持仔细考虑的 Web 标准的浏览器中进行了测试。

$(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 设置您喜欢的样式就可以了。

Answer 5

你也可以使用 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();
});

希望这对某人也有帮助！

Answer 6

我试过了，它对我来说看起来很不错。这有什么缺陷吗？ 这是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>

这是图片

Answer 7

众所周知，文件上传按钮的样式很难设置，但如果您愿意使用 jQuery 和我发现 this one 的插件非常有用。

它为您提供了在任何 DOM 元素上“伪造”文件上传按钮功能的可能性，因此您可以按照您想要的任何方式设置它的样式。适用于所有主流浏览器，包括旧版 IE。

Answer 8

试试这个解决方案：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());
});