如何使用CSS3/Javascript来创建“输入文件”样式?

前端之家收集整理的这篇文章主要介绍了如何使用CSS3/Javascript来创建“输入文件”样式?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
参见英文答案 > Styling an input type=“file” button31个答案我想要样式< input type =“file”/>使用CSS3。

或者,我想用户按下一个div(我将风格),这将打开浏览窗口。

这是可能做到这一点使用HTML,CSS3和Javascript / jQuery只?

解决方法

我有这个粗略的例子,你可能想要一些想法…

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

demo

猜你在找的CSS相关文章