使用jQuery-UI的文件输入按钮样式

Question

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

<input type="file">

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

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

Answer 1

是的，你可以，只有CSS。

创建一个<form> ，在其中包装一个<div>并将<input type="file">放在<div> 。

要覆盖<input type="file">的默认样式，主要优先级是设置opacity: 0; 在输入上，以便样式来自<div> css。

---

更新：

要从<input type="file">获取文本，您需要一些jQuery。

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

---

小提琴演示

Answer 2

简单的解决方案：

标记：

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

CSS：

.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

演示

注意：我使用Bootstrap作为样式按钮（ div.file-upload ）。

Answer 3

可能你想要这样的东西：

HTML：

<div id='file'>
   <label id='text'for="inputFile1">No file selected.</label>
   <label for="inputFile1">
       <input type="file" id='inputFile1' class='fileInput'/>
   </label>
</div>

CSS：

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;
}

和jQuery：

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

---

小提琴

Answer 4

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

演示：

http://jsfiddle.net/k6zBQ/2/

Answer 5

我的简单解决方案：将输入按钮放在带有css display的div中：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();       
});

小提琴