单击按钮区域重叠相邻按钮的单击区域

Question

我遇到的问题是input type='file'的点击区域与另一个按钮的点击区域重叠。我正在使用 RadUpload ，这是 Telerik 的一部分（我知道 RadUpload 已弃用， RadAsyncUpload 是替代品，但我需要使用 RadUpload ）。我的代码如下所示（使用webforms RadUpload控件生成此HTML）：

CSS：

.RadUpload .ruFileWrap {
    position: relative;
    white-space: nowrap;
    vertical-align: top;
    line-height: 20px;
    zoom: 1;
    overflow: hidden !important;
    display: inline !important;
    height: 24px;
}

HTML：

<li>
    <span class = "ruFileWrap ruStyled">
        <input type="file" name="ctl00_ContentMain_uplUserReferenceBatchFilefile0" id="ctl00_ContentMain_uplUserReferenceBatchFilefile0" size="23" class="ruFileInput" style="width: 202px;">
        <label for="ctl00_ContentMain_uplUserReferenceBatchFilefile0" style="display: none;">label</label>
        <input type="text" class="ruFakeInput" id="ctl00_ContentMain_uplUserReferenceBatchFileTextBox0" size="22" title="">
        <label for="ctl00_ContentMain_uplUserReferenceBatchFileTextBox0" style="display: none;">label</label>
        <br>
        <input type="button" value="Browse" class="ruButton ruBrowse">
        <input type="submit" class="ruButton" value="Submit" width="10" name="ctl00_ContentMain_uplUserReferenceBatchFilesubmit1" id="ctl00_ContentMain_uplUserReferenceBatchFilesubmit1">
    </span>
</li>

我认为问题在于CSS类.ruFileInput的样式，因为当我将鼠标悬停在 Chrome开发者工具中的元素上时，UI小部件之外的大部分区域会突出显示 - 请参阅附件屏幕截图。

当我点击提交按钮时，会打开弹出窗口以选择文件 - 这不是所需的功能 - 只有在单击文件文本框或浏览时才会出现弹出窗口。

对此问题的任何帮助都会很棒！

提前致谢！