設置輸入類型=「文件」按鈕的樣式

您如何設置輸入type="file"按鈕的樣式？

---

#1樓

CSS能夠在這裏作不少...有點招數...

<div id='wrapper'>
  <input type='file' id='browse'>
</div>

#wrapper {
     width: 93px; /*play with this value */
     height: 28px; /*play with this value */
     background: url('browseBtn.png') 0 0 no-repeat;
     border:none;
     overflow:hidden;
}

#browse{
     margin-left:-145px; /*play with this value */
     opacity:0; /* set to .5 or something so you can better position it as an overlay then back to zero again after you're done */
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
     filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
}

:: reference :: http://site-o-matic.net/?viewpost=19

-修道院

---

#2樓

的HTML

<div class="new_Btn">SelectPicture</div><br>
<input id="html_btn" type='file'" /><br>

的CSS

.new_Btn {
// your css propterties
}

#html_btn {
 display:none;
}

jQuery的

$('.new_Btn').bind("click" , function () {
        $('#html_btn').click();
    });
//edit: 6/20/2014: Be sure to use ".on" not ".bind" for newer versions of jQuery

小提琴 ： http : //jsfiddle.net/M7BXC/

若是沒有使用普通JavaScript的jQuery，您也能夠實現本身的目標。

如今，newBtn是與html_btn的連接，您能夠根據須要設置新的btn的樣式：D

---

#3樓

<label>
    <input type="file" />
 </label>

您能夠將輸入type =「 file」包裝在輸入標籤中。 根據須要設置標籤樣式，並使用display隱藏輸入內容：none;

---

#4樓

這是一個簡單的css only解決方案，它建立一致的目標區域，並讓您按本身的喜愛設置人造元素的樣式。

基本思想是這樣的：

1. 有兩個「假」元素（文本輸入/連接）做爲真實文件輸入的同級。 絕對放置它們，使它們剛好在目標區域的頂部。
2. 用div包裹文件輸入。 將「溢出」設置爲「隱藏」（這樣就不會溢出文件輸入），並使其大小與目標區域的大小徹底相同。
3. 將文件輸入的不透明度設置爲0，以使其隱藏但仍可單擊。 爲其設置較大的字體，以便您能夠單擊目標區域的全部部分。

這是jsfiddle： http : //jsfiddle.net/gwwar/nFLKU/

<form>
    <input id="faux" type="text" placeholder="Upload a file from your computer" />
    <a href="#" id="browse">Browse </a>
    <div id="wrapper">
        <input id="input" size="100" type="file" />
    </div>
</form>

---

#5樓

我在這裏找到了一個使用jQuery的真正聰明的解決方案，該解決方案在全部舊版瀏覽器以及新版瀏覽器中均適用。 使用實際的文件瀏覽按鈕，它能夠解決全部樣式和click（）問題。 我製做了一個普通的javascript版本： fiddle解決方案就像天才同樣簡單：使文件輸入不可見，並使用一段代碼將其放置在mousecursor下。

<div class="inp_field_12" onmousemove="file_ho(event,this,1)"><span>browse</span>
<input id="file_1" name="file_1" type="file" value="" onchange="file_ch(1)">
</div>
<div id="result_1" class="result"></div>


function file_ho(e, o, a) {
    e = window.event || e;
    var x = 0,
    y = 0;
    if (o.offsetParent) {
        do {
        x += o.offsetLeft;
        y += o.offsetTop;
        } while (o = o.offsetParent);
    }
var x1 = e.clientX || window.event.clientX;
var y1 = e.clientY || window.event.clientY;
var le = 100 - (x1 - x);
var to = 10 - (y1 - y);
document.getElementById('file_' + a).style.marginRight = le + 'px';
document.getElementById('file_' + a).style.marginTop = -to + 'px';
}

.inp_field_12 {
position:relative;
overflow:hidden;
float: left;
width: 130px;
height: 30px;
background: orange;
}
.inp_field_12 span {
position: absolute;
width: 130px;
font-family:'Calibri', 'Trebuchet MS', sans-serif;
font-size:17px;
line-height:27px;
text-align:center;
color:#555;
}
.inp_field_12 input[type='file'] {
cursor:pointer;
cursor:hand;
position: absolute;
top: 0px;
right: 0px;
-moz-opacity:0;
filter:alpha(opacity: 0);
opacity: 0;
outline: none;
outline-style:none;
outline-width:0;
ie-dummy: expression(this.hideFocus=true);
}
.inp_field_12:hover {
background-position:-140px -35px;
}
.inp_field_12:hover span {
color:#fff;
}