如何设置input type = file的宽度?

时间:2014-05-14 12:42:36

标签: html css

我有一张桌子里面有很多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>

Image

3 个答案:

答案 0 :(得分:0)

创建一个类并关闭输入。试试这个

.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/

答案 1 :(得分:0)

第一个选项

您可以调整低于70px的输入大小,大小问题看起来与下面的图像或td有关。

如果您查看输入,您会看到它的内嵌样式的不透明度设置为0,因此无论您在样式表中调整大小,都不会看到输入。

检查下方图像的尺寸并调整其大小。

第二个选项

在td上添加一个width属性,例如

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

答案 2 :(得分:0)

这有点困难,因为我们不知道您的.margin课程的内容,以及您的图片大小您可以尝试此修复。但是,如果其他css声明导致混乱,它可能不会发生。

<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