title: Click area of button overlapping click area of adjacent button
body: <p>I'm having issues with the click area of an <code>input type='file'</code> overlapping the click area of another button. I'm making use of <strong><em>RadUpload</em></strong> which is a part of <strong><em>Telerik</em></strong> (I'm aware <em>RadUpload</em> is depreciated and <em>RadAsyncUpload</em> is the replacement, but I need to use <em>RadUpload</em>). My code looks like the following (which is using webforms RadUpload controls to generate this HTML):</p>
  
  <p>CSS:</p>
  
  <pre><code>.RadUpload .ruFileWrap {
      position: relative;
      white-space: nowrap;
      vertical-align: top;
      line-height: 20px;
      zoom: 1;
      overflow: hidden !important;
      display: inline !important;
      height: 24px;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;li&gt;
      &lt;span class = "ruFileWrap ruStyled"&gt;
          &lt;input type="file" name="ctl00_ContentMain_uplUserReferenceBatchFilefile0" id="ctl00_ContentMain_uplUserReferenceBatchFilefile0" size="23" class="ruFileInput" style="width: 202px;"&gt;
          &lt;label for="ctl00_ContentMain_uplUserReferenceBatchFilefile0" style="display: none;"&gt;label&lt;/label&gt;
          &lt;input type="text" class="ruFakeInput" id="ctl00_ContentMain_uplUserReferenceBatchFileTextBox0" size="22" title=""&gt;
          &lt;label for="ctl00_ContentMain_uplUserReferenceBatchFileTextBox0" style="display: none;"&gt;label&lt;/label&gt;
          &lt;br&gt;
          &lt;input type="button" value="Browse" class="ruButton ruBrowse"&gt;
          &lt;input type="submit" class="ruButton" value="Submit" width="10" name="ctl00_ContentMain_uplUserReferenceBatchFilesubmit1" id="ctl00_ContentMain_uplUserReferenceBatchFilesubmit1"&gt;
      &lt;/span&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>I believe the issue lies within the styling of CSS class <code>.ruFileInput</code> since when I hover over the element in <em>Chrome Developer Tools</em> a large area outside of the UI widgets are highlighted - see attached screenshot.</p>
  
  <p><a href="https://i.stack.imgur.com/0ipLV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0ipLV.png" alt="OverlappingBrowseClickArea"></a></p>
  
  <p>When I click on the submit button the popup to select a file is opened - this is not desired functionality - the popup should only occur if the file textbox or browse is clicked.</p>
  
  <p>Any help with this issue would be great!</p>
  
  <p>Thanks in advance!</p>