如何风格“输入文件”与CSS3 / Javascript？ [英] How to style "input file" with CSS3 / Javascript?

问题描述

我想使用CSS3风格< input type =file/> 。

I would like to style <input type="file" /> using CSS3.

或者，我希望用户按下 div （即我将风格），这将打开浏览窗口。

Alternatively, I would like user to press on a div (that I will style) and this will open the Browse window.

是否可以使用HTML，CSS3和Javascript / jQuery？

Is that possible to do that using HTML, CSS3, and Javascript / jQuery only ?

推荐答案

你可能想要一些想法...

I have this rough example that you might want to get some idea...

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

CSS

CSS

#file {
    display:none;
}​

jQuery

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

demo

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

这篇关于如何风格“输入文件”与CSS3 / Javascript？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！