输入超出其边界的

我有类型文件的输入字段：输入超出其边界的

<input class="textbox" type="file" tabindex="1" value="" size="40" name="file">

如果你想知道，textbox类只是：

background: rgba(15, 15, 15, 0.95) none repeat scroll 0 0 !important;

每当我浏览并选择一个文件，我的文件输入将重新调整自己超出表格的边界，并使表格重新调整大小，超出其他表格的范围。

如何限制类型文件的输入，使其不重新调整我的表的大小？

当输入未在最右侧使用你可以看到约10个像素左右两个表之间的小空间...

现在，当它破裂，你可以看到它重叠与另一张桌子和上面显示的空间不见了。

，最大宽度仍然打破了表，但保持控制输入：

我试着用最大宽度来解决它，但它没有工作，只要我选择一个只会溢出的文件。

这个问题发生在Firefox上，不知道其他浏览器是否有相同的效果。

来源

2016-02-04 Guapo

什么是你正在使用，以确保它不会溢出完整的CSS？ – Onimusha

文件输入控件由不同的浏览器以不同的方式处理;如果你需要类似于“控制”他们在你的布局中的行为方式的任何东西，那么我建议按照这里概述的线来实现一些自定义样式，http：// tympanus。net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/ – CBroe

@Onimusha那整个css都没有其他东西 – Guapo

的下面的CSS修复了它，并没有导致与其他浏览器的任何问题：

table-layout: fixed;

来源

2016-02-08 05:52:13 Guapo

对于

<input class="textbox" type="file" tabindex="1" value="" size="40" name="file">

你需要在你的CSS：

.textbox{ 
    max-width: 100%; 
    background: rgba(15, 15, 15, 0.95) none repeat scroll 0 0 !important; 
}

谷歌chrome已经截断四溢的文字。 Firefox将需要在input[type=file]max-width: 100%;长文件名

在Firefox

宽度最大宽度：

没有在Firefox最大宽度：

来源

2016-02-04 22:50:59 Onimusha

[表格溢出继续，但控件大小保持不变，但仅在选择文件时发生，我忘记发布此图像，但已将其更新为问题**]（http：// i。 stack.imgur.com/17lYU.jpg） – Guapo

输入超出其边界的

回答

相关问题