带有jQuery UI的文件输入按钮样式

我正在使用jQuery UI，我注意到输入文件按钮：

<input type="file">

不能像其他按钮那样设置样式。我发现这看起来很酷，显然可以让你把一个图像，而不是按钮，但例子没有显示任何按钮样式

如果没有jQuery将主题样式应用于该按钮，我可以自己用CSS设置样式吗？

<div style="position:relative;display:inline-block;left:-4px;bottom:-6px;width:16px;  height: 24px;overflow:hidden;">
<img src="/images/attach.jpg" alt="" title="Add Attachment" style="height:24px;width:16px; position: relative;top: 1px; left: 0px;"/>
<input type="file" id="fileupload" name="upload" style=" opacity: 0;font-size: 50px;width:16px; filter:alpha(opacity: 0);  position: relative; top: -22px; left: -1px" />
</div>

演示：

---

是的，您可以，仅使用CSS

做一个

，在里面包一个

，把你的

放在

里

要覆盖

的默认样式，主要优先级是设置

不透明度：0，以便样式来自
css


更新：

要从
中获取文本，您需要一点jQuery

例如，添加一个段落。然后使用从输入中获取文本，并将其设置为段落文本。更新小提琴：


一个简单的解决方案：

标记：

<div class="fileUpload btn btn-primary">
    <span>Upload</span>
    <input type="file" class="upload" />
</div>

注意：我使用了引导设置按钮（
div.file-upload
）。
您可能想要这样的东西：

Html:
和jQuery：

我的简单解决方案：
将输入按钮放在一个div中，css显示：none
使你的按钮，无论你想和绑定一个功能，触发不可见的输入按钮

<div style="display: none;">
    <form id="fileupload">
        <input type="file" class="upload" name="newfile"/>
    </form>
</div>

<span id="browser">Click this line to browse all your awesome files</span>

JQUERY:
$("#browser").on('click', function(){
    $(".upload").click();       
});


点击这一行浏览你所有的精彩文件
JQUERY：
$（“#浏览器”）。在（'click'，function（）上{
$（“.upload”）。单击（）；
});

看一看，这是最简单的解决方案，我喜欢它只是CSS，不幸的是，你再也看不到带有所选文件名的文本了。是的，这是真的。不幸的是，文本被绑定到
输入的按钮元素
！引导只是一个补充。是的@Emileb我添加了
bootstarp
作为可选项。
<div id='file'>
   <label id='text'for="inputFile1">No file selected.</label>
   <label for="inputFile1">
       <input type="file" id='inputFile1' class='fileInput'/>
   </label>
</div>

input[type="file"] {
    opacity:0;
}
#file {
    background:url('...der_open-add.png') 0 0 no-repeat;
    width:100%;
    height:32px;
    position:relative;
    overflow:hidden;
}
#file label {
    padding:0 0 0 35px;
    color:green;
    width:100%;
}
#file #text {
    line-height:32px;
    width:100%;
    position:absolute;
    left:0px;
    top:0;
    color:green;
    font-size:11px;
}

$('#file input[type="file"]').on('change', function () {
    var o = this.value || 'No file selected.';
    $(this).closest('#file').find('#text').text(o);
});

<div style="display: none;">
    <form id="fileupload">
        <input type="file" class="upload" name="newfile"/>
    </form>
</div>

<span id="browser">Click this line to browse all your awesome files</span>

JQUERY:
$("#browser").on('click', function(){
    $(".upload").click();       
});