如何更改輸入文件按鈕大小？

我正在使用不透明方法的樣式輸入文件 - 實際輸入文件按鈕具有不透明度0，並且在它之前，使用z-index是另一個輸入（不透明度：1）。不幸的是，我希望我的可見按鈕是平方的圖片（寬：高：1：1） - 並且不可見的輸入文件始終是矩形（輸入框和選擇框的縱橫比約爲1:10）。問題是 - 如何調整輸入文件按鈕的平方（或任何大小），以使整個可見按鈕區域可點擊（因爲只有點擊不可見按鈕會導致打開瀏覽器窗口）。現在只有可見按鈕的一部分是「可點擊」的。如何更改輸入文件按鈕大小？

CSS：

<style type="text/css"> 
    .upload { 
     position:relative; 
    width:100px; 
    } 

    .realupload { 
    position:absolute; 
    top:0; 
    right:0; 
    opacity:0.5; 
    -moz-opacity:0.5; 
    filter:alpha(opacity:0.5); 
    z-index:2; 
    width:100px; 
    } 

    form .fakeupload { 
    background: url(images/bglines.png); 
    } 

    form .fakeupload input { 
    width:0px; 
    } 

    </style>

和HTML：使用「圖像」輸入型

<form> 
    <li class="upload"> 
    <div class="fakeupload"> 
     <input type="text" name="fakeupload" style="opacity: 0;"/> 
    </div> 
    <input type="file" name="upload" id="realupload" class="realupload" onchange="this.form.fakeupload.value = this.value;" style="font-size: 5px;" /> 
    </li> 
    </form>

來源

2012-02-05 Kalreg

爲什麼要將文本輸入字段頂部的文件輸入字段？這可能是你的問題完全。 – Scott 2012-02-05 22:00:08

改變輸入的位置沒有區別:( – Kalreg 2012-02-05 22:12:14

-1

試試？

否則，您必須確保在輸入按鈕上設置display：block參數。

來源

2012-02-05 21:51:02

我使上傳文件功能與「輸入文件」，所以我想「輸入圖像」不能幫助我。不是我的工作，雖然我可能做錯了什麼如果你有任何解決方案的想法與顯示：塊我會感激一些示例源代碼 – Kalreg 2012-02-05 21:59:23

「圖像」是一種方法來取代提交按鈕，而不是文件輸入。 – Rafael 2017-06-30 22:45:53

格式錯誤的HTML可能是問題所在。 - 您不能在li標籤之外添加表單標籤。

這似乎爲我工作的罰款..... Demo here

來源

2012-02-05 22:26:22 Scott

是的，但它不能解決問題。請查看： [link ]（http://jsfiddle.net/a4Jtz/4/） - 我想整個紅色區域引起點擊效果，並開始瀏覽文件。特別是「輸入文件」按鈕的左側部分（路徑輸入）。我現在最好的想法是不做一個文件輸入，但例如3個文件輸入一個在另一個之下，以使方形區域可點擊。 – Kalreg 2012-02-05 22:59:10

對不起，我根本沒有看到你的問題。整個區域讀取點擊。 – Scott 2012-02-05 23:05:24

奇怪 - 對我來說只有'輸入文件'區域導致瀏覽效果（與透明度）。點擊時沒有透明輸入文件的紅色區域什麼也不做。我使用的是Firefox 10.0--也許這就是我們擁有不同瀏覽器的問題？ – Kalreg 2012-02-05 23:12:28

我們也有類似的情況。

它不是超級優雅，但不是把多個文件輸入您可以嘗試如下：

的寬度設置父相對元件溢出：隱藏

（可選）設置高度爲100％

正如demo here（根據斯科特的演示）

只適用於火狐

來源

2012-02-20 11:35:10

該CSS也適用於IE8！偉大的建議。 – kernel 2014-02-03 14:14:50

爲了縮短輸入類型的文件按鈕可點擊區域，你可以嘗試使用此：

form .fakeupload input { 
    width:20px; 
    transform: scale(0.23,1); 
}

這將縮小輸入類型文件的可點擊區域。（您可以使用transform：scale（x，y） - 其中x和y是適合您需要的編號。請記住爲移動設備或不同瀏覽器添加適當的樣式

來源

2017-03-30 14:04:47 born2fr4g

如何更改輸入文件按鈕大小？

回答

相關問題