如何使用純CSS按鈕（無圖像）更改輸入按鈕？

可能重複：
Styling <input type=「file」>
Style input type file?如何使用純CSS按鈕（無圖像）更改輸入按鈕？

我真的試圖改變默認的輸入類型= 「文件」按鈕與由CSS創建的按鈕。這是我的html代碼：

<input type="file" name="name" value="" /> 
<a href="#" class="button">Browse</a>

...這是我的CSS按鈕代碼：

.button { 
    display:inline; 
    -moz-box-shadow:inset 0px 1px 0px 0px #fff6af; 
    -webkit-box-shadow:inset 0px 1px 0px 0px #fff6af; 
    box-shadow:inset 0px 1px 0px 0px #fff6af; 
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #f3b415)); 
    background:-moz-linear-gradient(center top, #ffec64 5%, #f3b415 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#f3b415'); 
    background-color:#ffec64; 
    -moz-border-radius:6px; 
    -webkit-border-radius:6px; 
    border-radius:6px; 
    border:1px solid #f3b415; 
    display:inline-block; 
    color:#333333; 
    font-family:arial; 
    font-size:15px; 
    font-weight:bold; 
    padding:6px 24px; 
    text-decoration:none; 
    text-shadow:1px 1px 0px #ffee66; 
} 
.button:hover { 
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f3b415), color-stop(1, #ffec64)); 
    background:-moz-linear-gradient(center top, #f3b415 5%, #ffec64 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3b415', endColorstr='#ffec64'); 
    background-color:#f3b415; 
} 
.button:active { 
    position:relative; 
    top:1px; 
}

此外，您還可以檢查它here

來源

2012-10-31 Mikerobenics

建立一個Demo按在QuirksMode給出的伎倆。閱讀它的解釋。

HTML

<div class="fileinputs"> 
    <input type="file" class="file" /> 
    <div class="fakefile"> 
     <a href="#" class="button">Browse</a> 

    </div> 
</div>

CSS

.button { 
    display:inline; 
    -moz-box-shadow:inset 0px 1px 0px 0px #fff6af; 
    -webkit-box-shadow:inset 0px 1px 0px 0px #fff6af; 
    box-shadow:inset 0px 1px 0px 0px #fff6af; 
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #f3b415)); 
    background:-moz-linear-gradient(center top, #ffec64 5%, #f3b415 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#f3b415'); 
    background-color:#ffec64; 
    -moz-border-radius:6px; 
    -webkit-border-radius:6px; 
    border-radius:6px; 
    border:1px solid #f3b415; 
    display:inline-block; 
    color:#333333; 
    font-family:arial; 
    font-size:15px; 
    font-weight:bold; 
    padding:6px 24px; 
    text-decoration:none; 
    text-shadow:1px 1px 0px #ffee66; 
} 
.button:hover { 
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f3b415), color-stop(1, #ffec64)); 
    background:-moz-linear-gradient(center top, #f3b415 5%, #ffec64 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3b415', endColorstr='#ffec64'); 
    background-color:#f3b415; 
} 
.button:active { 
    position:relative; 
    top:1px; 
} 


div.fileinputs { 
    position: relative; 
} 

div.fakefile { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    z-index: 1; 
} 

input.file { 
    position: relative; 
    text-align: right; 
    -moz-opacity:0 ; 
    filter:alpha(opacity: 0); 
    opacity: 0; 
    z-index: 2; 
}

來源

2012-10-31 18:17:46

按我的知識，你可以」 t做造型到「瀏覽」按鈕。你身邊唯一的工作就是用Z-Index疊加另一個按鈕;這可能不是一個很好的做法。

來源

2012-10-31 18:02:42 Praveen

文件輸入由操作系統呈現，它們不是HTML規範的一部分。

來源

2012-10-31 18:02:45

你可以只調整輸入是一個按鈕，然後寫撫育文件jQuery函數：

<input type="button" name="name" value="Browse" class="button"/>

來源

2012-10-31 18:04:05 IronMan84

如何使用純CSS按鈕（無圖像）更改輸入按鈕？

回答

相關問題