javascript - 输入类型文件超出其宽度

Question

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

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

我也附上了我的代码

.inputcontainer
{
width:500px;
margin:0 auto;
padding:0;
}
.filess
{
text-align:center; 
width:200px; 
margin:auto; 
border:none;
position:relative;
} 
.filess .file_upload
{
max-width:150px; 
width:100%; 
height:35px;
padding-top:6px; 
background:#f55282; 
color:#fff; 
display:inline-block; 
margin:0 auto 20px; 
cursor:pointer;
font-size:19px;
}
.filess .file_upload input[type="file"]
{
position:absolute; 
height:100%; 
width:100%; 
opacity:0; 
top:0;  
left:0;
cursor:pointer;
}
.filess span
{
float:left; 
text-align:center; 
margin:auto; 
display:inline-block;
}
.filess span.delt_head 
{
float:right; 
cursor:pointer;
}

<div class="inputcontainer">
<div class="filess">
<span class="delt_head"><i>Delete</i></span>
<span class="file_upload"><input type="file" /> Choose a file</span>
</div>
</div>

任何帮助将不胜感激

Answer 1

file 元素的溢出尝试 overflow:hidden 可能存在问题。

这样它就会环绕它的父容器。

.inputcontainer
{
width:500px;
margin:0 auto;
padding:0;
}
.filess
{
text-align:center; 
width:200px; 
margin:auto; 
border:none;
position:relative;
} 
.filess .file_upload
{
max-width:150px; 
width:100%; 
height:35px;
padding-top:6px; 
background:#f55282; 
color:#fff; 
display:inline-block; 
margin:0 auto 20px; 
cursor:pointer;
font-size:19px;
}
.filess .file_upload input[type="file"]
{
position:absolute; 
height:100%; 
width:100%; 
opacity:0; 
top:0;  
left:0;
cursor:pointer;
overflow:hidden;
}
.filess span
{
float:left; 
text-align:center; 
margin:auto; 
display:inline-block;
}
.filess span.delt_head 
{
float:right; 
cursor:pointer;
}

<div class="inputcontainer">
<div class="filess">
<span class="delt_head"><i>Delete</i></span>
<span class="file_upload"><input type="file" /> Choose a file</span>
</div>
</div>