title: CSS: How to make custom file upload button take full width (button works)
body: <p>I am new to CSS and hope someone here can help me with this. </p>
  
  <p>I am trying to apply a simple <strong>custom style</strong> to a <strong>file upload button</strong> (as part of an <strong>HTML form</strong>) to make it look similar to other buttons on my page and to get a similar look cross-browser. </p>
  
  <p>So far I have the following which works as intended. 
  My only problem now is that I would like the button to <strong>take the full width of its parent div</strong> (in my case this will span across 9/12 ('col-9') of the page). </p>
  
  <p>I tried adding <code>width: 100%;</code> to the CSS but then the button doesn't work anymore. </p>
  
  <p><strong>My HTML:</strong> </p>
  
  <pre><code>&lt;div class="col-3 frmCaption"&gt;Attachments:&lt;/div&gt;
  &lt;div class="col-9"&gt;
      &lt;div class="customUpload btnUpload btnM"&gt;
          &lt;span&gt;Upload files&lt;/span&gt;
          &lt;input type="file" class="upload" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>My CSS:</strong></p>
  
  <pre><code>.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;
  }
  </code></pre>