CSS: How to make custom file upload button take full width (button works) - html

Question

I am new to CSS and hope someone here can help me with this.
I am trying to apply a simple custom style to a file upload button (as part of an HTML form) to make it look similar to other buttons on my page and to get a similar look cross-browser.
So far I have the following which works as intended.
My only problem now is that I would like the button to take the full width of its parent div (in my case this will span across 9/12 ('col-9') of the page).
I tried adding width: 100%; to the CSS but then the button doesn't work anymore.
My HTML:
<div class="col-3 frmCaption">Attachments:</div>
<div class="col-9">
<div class="customUpload btnUpload btnM">
<span>Upload files</span>
<input type="file" class="upload" />
</div>
</div>
My CSS:
.btnDefault, .btnUpload {
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
color: #333333;
cursor: pointer;
font-weight: 400;
display: inline-block;
padding: 6px 12px;
text-align: center;
text-decoration: none;
vertical-align: middle;
}
.btnDefault:focus, .btnDefault:hover, .btnUpload:focus, .btnUpload:hover {
background-color: #E6E6E6;
}
.btnM {
border-radius: 4px;
font-size: 14px;
padding: 6px 12px;
}
.customUpload {
overflow: hidden;
position: relative;
}
.customUpload input.upload {
cursor: pointer;
margin: 0;
opacity: 0;
filter: alpha(opacity=0);
padding: 0;
position: absolute;
right: 0;
top: 0;
}

Answer 1

To style input elements, you need to actually style its label element.
From MDN,
The HTML Label Element () represents a caption for an item in a user interface. It can be associated with a control either by placing the control element inside the element, or by using the for attribute. Such a control is called the labeled control of the label element.
So, whenever you click a label, the attached input gets triggered.
So, just wrap the input element in a label instead of a div and stretch as much as you want. That will fix your issue.
.btnDefault,
.btnUpload {
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
color: #333333;
cursor: pointer;
font-weight: 400;
display: inline-block;
padding: 6px 12px;
text-align: center;
text-decoration: none;
vertical-align: middle;
}
.btnDefault:focus,
.btnDefault:hover,
.btnUpload:focus,
.btnUpload:hover {
background-color: #E6E6E6;
}
.btnM {
border-radius: 4px;
font-size: 14px;
padding: 6px 12px;
}
.customUpload {
overflow: hidden;
position: relative;
display: block;
}
.customUpload input.upload {
cursor: pointer;
margin: 0;
opacity: 0;
filter: alpha(opacity=0);
padding: 0;
position: absolute;
right: 0;
top: 0;
}
<div class="col-3 frmCaption">Attachments:</div>
<div class="col-9">
<label class="customUpload btnUpload btnM"> <span>Upload files</span>
<input type="file" class="upload" />
</label>
</div>
Working Fiddle

Answer 2

You need to apply the width property to the containing <div> as well. Once the div has the full size, then only the button inside can have the full width.
For simplicity i have made change to html, you can move it to appropriate classes.
<div class="col-3 frmCaption">Attachments:</div>
<div class="col-9">
<div class="customUpload btnUpload btnM" style="width:100%;">
<span>Upload files</span>
<input type="file" class="upload" style="width:100%;"/>
</div>
</div>
JS Fiddle
Or you can use this CSS andadd it both to your div and file upload,
.fullwidth
{
width : 100%;
}
<div class="col-3 frmCaption">Attachments:</div>
<div class="col-9">
<div class="customUpload btnUpload btnM fullwidth">
<span>Upload files</span>
<input type="file" class="upload fullwidth"/>
</div>
</div>

Answer 3

Make the button take 12 cols (as you use a 12 col system) , as that is the max number of cils available, in that way the elemts will take up the size of the div that it is contained in