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

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;
}

Can you create a fiddle?

Mr_Green
– Mr_Green

2015-05-29 06:13:47 +00:00
Commented May 29, 2015 at 6:13 — Mr_Green
– Mr_Green, Commented May 29, 2015 at 6:13

Mr_Green · Accepted Answer · 2016-10-12 13:47:01Z

5

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

edited Oct 12, 2016 at 13:47

answered May 29, 2015 at 6:17

Mr_Green

42k48 gold badges171 silver badges277 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Rohit Vipin Mathews Over a year ago

Is the label really required? I was able to get it to work on the div. I'm I missing something?

Mr_Green Over a year ago

@Rohit you are giving width: 100% explicity to both input and the wrapper, that is why it is working. but it is recommended to use label to style the inputs as you want. because it handles precisely. As you can see, in my case, I doesn't matter what is the width of the input.

Rohit Vipin Mathews Over a year ago

Yes, You are right, I can't get it to work unless I have width on both button and its container. Thanks @Mr_Green

keewee279 Over a year ago

Thanks a lot for this - this is very helpful ! For now I will go with Rohit's suggestion but will test this later as well.

keewee279 Over a year ago

Update: after looking at your fiddle and testing your code I decided to go with this solution as I think this is the more professional approach and it works great (Rohit's suggestion is great too as he gave me exactly what I was looking for in the first place).

|

Rohit Vipin Mathews · Accepted Answer · 2015-05-29 06:20:28Z

1

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>

edited May 29, 2015 at 6:20

answered May 29, 2015 at 6:13

Rohit Vipin Mathews

11.8k15 gold badges60 silver badges113 bronze badges

2 Comments

keewee279 Over a year ago

Update: after looking at Mr_Green's fiddle and testing his code I decided to go with his solution as I think this is the more professional approach and it works great (your suggestion is great too as he you me exactly what I was looking for in the first place). Thanks again !

Rohit Vipin Mathews Over a year ago

Yes @Mr_Green has the better answer.

Mayank Raj · Accepted Answer · 2015-05-29 06:18:32Z

0

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

answered May 29, 2015 at 6:18

Mayank Raj

1,62412 silver badges13 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related