输入类型文件超过其宽度

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

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

，以便它将其父容器包裹起来。

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