如何設置輸入類型=文件的寬度？

我有一張桌子裏面有很多td的。裏面的一個td我有「輸入類型=文件」。我需要減小這種輸入類型的大小，但問題是它不會低於70px（我猜最小值是70px）。正因爲如此，它與另一個td重疊。如何設置輸入類型=文件的寬度？

<td class="AttachOnMouseOutText" 
    id="fileid" 
    nowrap="nowrap" 
    style="padding-right:15px; 
      padding-left: 10px;" 
    valign="top" 
    onClick="fad_open();" 
    onMouseOver="highlightBG('fileid',0,'add','add_over.gif'); 
       this.style.cursor='hand'; 
       return true;" 
    onMouseOut="highlightBG('fileid',1,'add','add.gif'); 
       return true;"> 


<p class="Margin" 
     style="position:relative;"> 

    <input type="file" 
       name="AttachLink" 
       style="position: absolute; 
         filter: progid:DXImageTransform.Microsoft.Alpha(style=0, opacity=0); 
         opacity:0; 
         width:70px; 
         height:50px; 
         cursor: hand; 
         left:-25px;" 
       title="Add File Attachment" 
       onChange="getWeblink();"> 

    <img src="#ContactsImagePath#add.gif" 
     alt="Add File Attachment" 
     border="0" 
     align="middle" 
     name="add" 
     id="add" 
     onClick="fad_open();"> 

</p> 

    <span>Add File</span>

來源

2014-05-14 Vasu

某些代碼提琴 – chandu

放置顯示：塊 –

@chandu是的，因爲這樣做很有意義。感謝您的評論。 – Ruddy

創建一個類，並關閉輸入。試試這個

.myfile::-webkit-file-upload-button { 
    visibility: hidden; 
} 

.myfile { 
    position: absolute; 
width:70px; background:(255,255,255,0); height:50px; cursor: hand; left:-25px; display: inline-block; 
}

http://jsfiddle.net/nY8L9/1/

來源

2014-05-14 12:50:32

第一選項

您可以調整超過70像素的輸入低，尺寸問題看起來像它的東西與下面的圖像或TD做。

如果你看看輸入，你會發現它有一個內聯樣式的不透明度設置爲0，所以無論你在樣式表中調整了多少，你都不會看到輸入。

檢查下方圖像的尺寸並調整其大小。

第二個選項

加入對TD本身的寬度屬性，例如

<td width="20">20px td</td>

來源

2014-05-14 13:02:12

這是有點困難的，因爲我們不知道什麼是你.margin類呢，也沒有大小您的圖片您可以嘗試此修復。但是，如果其他CSS聲明導致conflic，它可能不會。

<p class="Margin" style="position:relative; width:YOUR_WIDTH;"> 
    <input style="etc.etc.etc. width:100%;etc.> 
    ... 
    <img style="max-width:100%;">

注意：不確定爲什麼您的輸入剩下：-25px。如果添加背景顏色並將其設置爲完全不透明，則會看到負向左側位置會創建一個奇怪的點擊區域。就個人而言，我會將其更改爲left:0

來源

2014-05-14 13:14:35 herezy

如何設置輸入類型=文件的寬度？

回答

相關問題