使用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();       
});

小提琴