输入类型文件超过其宽度

Question

I have styled a file selector but the problem is it exceeds its max-width from the parent container

Everything works fine here but run this code on browser you'll see that the input type file will exceed its limit

I have also attached my code

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

Any help will be appreciated

Answer 1

There might be a problem with overflow try overflow:hidden for the file element.

so that it will wrap around its parent container.

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