水平居中对齐“文件上载”控件的“未选择文件”消息

Question

我有一个文件上传控件，如下所示，

代码：

<div class="row">
        <div class="col-md-12">
            <div class="alert alert-warning normal-text hide" role="alert" id="ImportErrorMessage"></div>
            <div class="panel panel-default">
                <div class="panel-body">
                    <form id="FileImportForm" method="POST" action="api/FileUpload/Upload" enctype="multipart/form-data">
                        <div class="col-md-1">
                            <a href="#" class="btn btn-danger btn-xs download-template" title="Get Template"><span class="glyphicon glyphicon-download-alt"></span>&nbspGet Template</a>
                        </div>
                        <div class="col-md-3">
                            <select id="ItemDdl" class="col-md-12 item-list" title="Items"></select>
                        </div>
                        <div class="col-md-3">
                            <input type="file" id="ImportFile" name="ImportFile" accept="*.xlsx" class="col-md-12" />
                        </div>
                        <div class="col-md-1">
                            <button class="btn btn-danger btn-xs" id="ImportFileBtn" type="Submit" title="Import and Validate"><span class="glyphicon glyphicon-import"></span>Validate</button>
                        </div>                        
                    </form>
                </div>
            </div>
        </div>
    </div>

期望：

我想在中心显示“未选择文件”消息，如图所示。原因是，减少“验证”按钮和“选择文件”按钮之间的空白区域。

已尝试的选项：

我试图通过css属性和jquery修改它，但无法在UI中找到文本。

感谢任何帮助。

Answer 1

抱歉，没有简单的方法可以做到这一点。唯一的方法是隐藏输入，将图像放在输入的位置，将一些文本放在margin左边。使用javascript，您可以轻松定位它，并确保点击可以跨浏览器工作。