如何设置“输入文件"的样式使用 CSS3/Javascript? [英] How to style "input file" with CSS3 / Javascript?

问题描述

我想使用 CSS3 设置 <input type="file"/> 的样式.

或者，我希望用户按下 div(我将设置样式)，这将打开浏览窗口.

是否可以仅使用 HTML、CSS3 和 Javascript/jQuery 来做到这一点?

解决方案

我有一个粗略的例子，你可能想了解一下...

html

选择文件
<input type="file" name="file"/>

CSS

#file {显示:无；}

jQuery

var wrapper = $('
').css({height:0,width:0,'overflow':'hidden'});var fileInput = $(':file').wrap(wrapper);文件输入.更改(函数(){$this = $(this);$('#file').text($this.val());})$('#file').click(function(){fileInput.click();}).展示();

演示

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

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

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...

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

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

这篇关于如何设置“输入文件"的样式使用 CSS3/Javascript?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！