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 reduce shiny interactive rmarkdown margins?

    How to display a portion of an image with CSS?

    how to make 100% buttons with fixed pixel space

    How to add a color in the
    bottom content area?

    How to shift element upwards to it's variable height using css

    express: how to send html together with css using sendFile?

    How to set height?

    using css modules how do I define more than one style name

    How to apply a CSS class to all instances of a control in ASP.NET

    How to use localhost to host my HTML and CSS website

    How to force css borders to display on layered page?

    How to fit CSS buttons into table cells?

    How can I force an image to be no larger than the section it's in?

    How can I be sure that a website is responsive by only looking the code?

    How to call a jquery funcion with a css button?

    How to use body horizontal scrollbar in free jqgrid

    Jsoup html parsing style="display:none; dont show the link

    How to make expand-collapse different div heights according to device width using css/javascript

    how to show one element under the other one?

    How to insert variables in inline CSS rules with pure JavaScript?

    How to style a built-in comment box imported from a third party?

    How to attach an element on the dynamically created div

    how to make input and select look nice beside eachother with custom height?

    How to create uparrow downarrow using simple css

    how to draw a vertical line between two option boxes using css

    How to do simple client-side form validation using JavaScript/jQuery?

    How to compress CSS

    CSS / Javascript: hidden div does not take full width after being shown

    How can I work around IE7 being unable to style dynamic elements created via DOM api

    How to vertically align label and input in Bootstrap 3?