如何用CSS3/Javascript设置"输入文件"的样式？

Question

我想<input type="file" />用CSS3 设计风格.

或者,我希望用户按下div(我会设计),这将打开浏览窗口.

这可能只使用HTML,CSS3和Javascript/jQuery吗？

Answer 1

我有一个粗略的例子,你可能想知道一些......

HTML

<div id="file">Chose file</div>
<input type="file" name="file" />????????????????????????????????????????????????????????????????????????????????????????????????????????????

CSS

#file {
    display:none;
}?

jQuery的

var wrapper = $('<div/>').css({height:0,width:0,'overflow':'hidden'});
var fileInput = $(':file').wrap(wrapper);

fileInput.change(function(){
    $this = $(this);
    $('#file').text($this.val());
})

$('#file').click(function(){
    fileInput.click();
}).show();

演示

​​​​​​​​​​​​​​

Answer 2

检查Reigels的想法,之后这一次,我写了这个简单的解决方案,以一个造型的通病type="file"输入字段(测试它在Firefox,Safari和Chrome).

<div style="position:relative;">
<div id="file" style="position:absolute;">Click here to select a file</div>
<input type="file" name="file" style="opacity:0; z-index:1;" onchange="document.getElementById('file').innerHTML = this.value;">
</div>

那么你当然可以根据需要设置"文件"div的样式.

如果您想使用type="text"输入而不是div,只需更改innerHTML为value:

<div style="position:relative;">
<input type="text" id="file" style="position:absolute;" placeholder="Click here to select a file">
<input type="file" name="file" style="opacity:0; z-index:1;" onchange="document.getElementById('file').value = this.value;">
</div>

这是我使用jQuery的原始答案:

<div style="position:relative;">
<div id="file" style="position:absolute;">Click here to select a file</div>
<input type="file" name="file" style="opacity:0; z-index:1;" onchange="$('#file').text($(this).val());">
</div>

Answer 3

我也为此制作了一个自定义样式.看看这个

JS小提琴演示 - 自定义输入类型="文件"

HTML

<input type="file" id="test">
<div class="button-group"> 
<a href="#" id="browse" class="button primary">Browse</a>
<a href="#" id="save" class="button">Save</a>
<a href="#" id="clear" class="button danger">Clear</a>
</div>
<input type="text" id="testfile"></input>

CSS

body {
padding:100px;
}
input[type="file"] {
position:absolute;
display:none;
}
#testfile {
height: 26px;
text-decoration: none;
background-color: #eee;
border:1px solid #ccc;
border-radius:3px;
float:left;
margin-right:5px;
overflow:hidden;
text-overflow:ellipsis;
color:#aaa;
text-indent:5px;
}
#actionbtnBrowse, #actionbtnSave {
margin:0 !important;
width:60px;
}

JQuery的

$("#browse").click(function () {
$("#test").click();
})

$("#save").click(function () {
alert('Run a save function');
})

$("#clear").click(function () {
$('#testfile').val('');
})

$('#test').change(function () {
$('#testfile').val($(this).val());
})

还要添加到外部资源选项卡:

https://github.com/necolas/css3-github-buttons/blob/master/gh-buttons.css

Answer 4

以下是使用HTML,CSS和Javascript(没有任何框架)的方法:

我们的想法是<input type='file'>隐藏按钮并使用<div>您设置为文件上传按钮的假人.点击这个<div>,我们称之为隐藏<input type='file'>.

演示:

// comments inline

document.getElementById("customButton").addEventListener("click", function(){
  document.getElementById("fileUpload").click();  // trigger the click of actual file upload button
});

document.getElementById("fileUpload").addEventListener("change", function(){
  var fullPath = document.getElementById('fileUpload').value;
  var fileName = fullPath.split(/(\\|\/)/g).pop();  // fetch the file name
  document.getElementById("fileName").innerHTML = fileName;  // display the file name
}, false);

body{
  font-family: Arial;
}

#fileUpload{
  display: none; /* do not display the actual file upload button */
}

#customButton{  /* style the dummy upload button */
  background: yellow;
  border: 1px solid red;
  border-radius: 5px;
  padding: 5px;
  display: inline-block;
  cursor: pointer;
  color: red;
}

<input type="file" id="fileUpload"> <!-- actual file upload button -->
<div id="customButton">Browse</div>  <!-- dummy file upload button which can be used for styling ;) -->
<span id="fileName"></span> <!-- the file name of the selected file will be shown here -->

Answer 5

不需要假div！没有 Js 没有额外的 html。仅使用 css 是可能的。

最好的方法是使用伪元素 :after 或 :before 作为公开 de 输入的元素。然后根据需要设置该伪元素的样式。我建议您对所有输入文件采用通用样式，如下所示：

input[type="file"]:before {
  content: 'Browse';
  background: #FFF;
  width: 100%;
  height: 35px;
  display: block;
  text-align: left;
  position: relative;
  margin: 0;
  margin: 0 5px;
  left: -6px;
  border: 1px solid #E0E0E0;
  top: -1px;
  line-height: 35px;
  color: #B6B6B6;
  padding-left: 5px;
  display: block;
}

--> 演示