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


Tags: html,css,width,block,fixed-width

Problem :

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


Solution :

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


    CSS Howto..

    How to workaround: IE6 does not support CSS “attribute” selectors

    How to apply css transform on iOS without using -webkit-transform?

    How to add a custom css selector to just a span??

    CSS box-shadow shows weird white region?

    How to divide content with CSS even, odd?

    How to specify a path to be followed while animating an object in HTML using CSS, JQuery

    How to do browser detection with jQuery 1.3 with $.browser.msie deprecated?

    Does anyone know how Pinterest.com's layout works?

    Limit number of lines shown in a textbox, but not limiting the user to write

    How to change css for different media without the page having to be refreshed

    how do i inject css in gwt?

    How to change css for span in span?

    Percentages in CSS: How are they calculated internally?

    how to style margins between items in a
    list?

    How to set p margin for a section

    How To Select Two classes with CSS?

    CSS: How to specify table's height such that a vertical scroll bar appears?

    Glide.js, how to check size of image?

    How to transform Menu icon to Arrow icon? [closed]

    how to set css for html page opened by 'appAPI.openURL' in crossrider

    How to change lines in an angularJS+Bootstrap?

    CSS - How to set gradient color background for different heights

    CSS how to have two divs to the right of one div but not beside each other

    How to prevent menu from closing when losing mouse focus?

    How do I stop the text from moving when hovered? (background-image is involved)

    How can I use PHP code in a CSS file

    how to access anti aliasing method of a font with CSS

    How to animate a div to move from end to end infinitely

    Wordpress nav menu images not showing up in mobile safari

    How do you set the background color for a variable height page?