Javascript 输入类型文件超出其宽度

我已经设置了一个文件选择器的样式，但问题是它超出了父容器的最大宽度

这里一切正常，但在浏览器上运行此代码，您将看到输入类型文件将超出其限制

我还附上了我的代码

.inputcontainer
{
宽度：500px；
保证金：0自动；
填充：0；
}
.文件
{
文本对齐：居中；
宽度：200px；
保证金：自动；
边界：无；
位置：相对位置；
} 
.files.file\u上传
{
最大宽度：150px；
宽度：100%；
高度：35px；
填充顶部：6px；
背景#f55282；
颜色：#fff；
显示：内联块；
保证金：0自动20px；
光标：指针；
字号：19px；
}
.files.file\u上传输入[type=“file”]
{
位置：绝对位置；
身高：100%；
宽度：100%；
不透明度：0；
排名：0；
左：0；
光标：指针；
}
.s文件跨度
{
浮动：左；
文本对齐：居中；
保证金：自动；
显示：内联块；
}
.files span.delt_头
{
浮动：对；
光标：指针；
}

删除
选择一个文件

溢出可能有问题请尝试

文件

元素的

溢出：隐藏

这样它将环绕其父容器

.inputcontainer
{
宽度：500px；
保证金：0自动；
填充：0；
}
.文件
{
文本对齐：居中；
宽度：200px；
保证金：自动；
边界：无；
位置：相对位置；
} 
.files.file\u上传
{
最大宽度：150px；
宽度：100%；
高度：35px；
填充顶部：6px；
背景#f55282；
颜色：#fff；
显示：内联块；
保证金：0自动20px；
光标：指针；
字号：19px；
}
.files.file\u上传输入[type=“file”]
{
位置：绝对位置；
身高：100%；
宽度：100%；
不透明度：0；
排名：0；
左：0；
光标：指针；
溢出：隐藏；
}
.s文件跨度
{
浮动：左；
文本对齐：居中；
保证金：自动；
显示：内联块；
}
.files span.delt_头
{
浮动：对；
光标：指针；
}

删除
选择一个文件

查看屏幕截图可能是您的浏览器出现问题。请检查其他浏览器。我现在正在使用firefox浏览器。为了快速回复，我会检查这个。