使用bootstrap,我使用input-group
和button
创建了input type='file'
。
除了IE9
之外,它在任何地方都能正常运行。在IE9上,浏览按钮正在从右侧裁剪。
演示: http://jsbin.com/alESiBo/6/edit
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="icon-upload-alt"></i> Upload
</button>
</span>
<input id="fileField" class="form-control" name="fileField" type="file" />
</div>
IE 9.0.8112.16421
Chrome 31.0.1650.63 m
带快照的IE版本
答案 0 :(得分:1)
您的代码似乎在IE9中正常运行。 http://fiddle.jshell.net/XCN83/1/show/
因此,请确保未启用兼容模式。 (见附图中的红圈)
如果没有,你所拥有的其他一些css正在影响它,使用开发工具检查器查找应用于文件输入框的样式,并且它的父母一直在努力。
答案 1 :(得分:0)
您所看到的(灰色部分)是IE9中文件上传的“浏览...”部分。这就是bootstrap css的“就是这样”。正如其他答案所表明的那样,如果你不喜欢这个,是的,只需要看看你自己做的。
在头标记中添加此内容以防止进一步不匹配...
<meta http-equiv='X-UA-Compatible' content='IE=edge'/>
最常见的是将此控件设置为隐藏(我同意它总是看起来很糟糕且不一致)并从您自己的假按钮“触发”它。
其他答案有很多很棒的链接。
答案 2 :(得分:0)
就像Rob Sedgwick在his answer中所说的那样,这就是控件在IE中看起来的样子,并且它的样式并不是真正允许的。
但是......你可以作弊:让文件输入消失,并创建你自己的假输入。然后使用JS重定向相关事件。
<强> HTML 强>
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="icon-upload-alt"></i> Upload
</button>
</span>
<input id="fileField" class="form-control" name="fileField" type="file" />
<span class="form-control form-control-overlay" id="fileFieldOverlay">Choose file</span>
</div>
<强> CSS 强>
.form-control[type="file"] {
margin-bottom: -100%;
opacity: 0;
}
.form-control-overlay {
/* style, if you want */
cursor: pointer;
}
<强>的Javascript 强>
var fileFieldEl = document.getElementById("fileField");
var fileFieldOverlayEl = document.getElementById("fileFieldOverlay");
// On change of file selection, update display
fileFieldEl.onchange = function(ev) {
// remove file path; it's a fake string for security
fileFieldOverlayEl.innerText = ev.target.value.replace(/^.*(\\|\/)/, '');
};
// Redirect clicks to real file input
fileFieldOverlayEl.onclick = function() {
fileFieldEl.click();
};
答案 3 :(得分:0)
再添加一个类:
bootstrap.css:3296
.input-group {position: relative; display: table; border-collapse: separate; width: 100%;}
尝试这可能会帮助你。
答案 4 :(得分:-1)
我建议您使用自己的自定义CSS在浏览器中提供相同的外观和浏览器中的相同行为。我在项目中使用了类似的方法来处理这个问题。以下是JSBIN现场演示的相同细节链接。
HTML代码:
<!--Import button-->
<div class="fileinput-button import-modal-select-file-btn" title="Import file">
<!--Name of button -->
<span>Upload</span>
<!-- Upload file control-->
<input id="importFileUploadFileId" type="file" name="file" onchange="uploadFile(this);" />
<!-- Any hidden field; Generally needed when upload button is part of form-->
<input type="hidden" name="request" value="value"/>
</div>
CSS代码(请根据您的需要自定义):
.fileinput-button {
border-radius: 5px;
padding-left: 10px;
padding-right: 10px;
background-color: #e7e9eb;
border: 1px solid #454b59;
font-family: "Gill Sans","Gill Sans MT","Helvetica Neue",Helvetica,Arial,sans-serif;
color: #454b59;
font-weight: lighter;
font-size: 16px;
cursor: pointer;
overflow: hidden;
position: relative !important;
background-image: none;
height: 30px;
outline: none;
height: 28.5px;
line-height: 28.5px;
}
.fileinput-button input {
position: absolute;
top: 0;
right: 0;
margin: 0;
opacity: 0;
filter: alpha(opacity=0);
transform: translate(-300px, 0) scale(4);
font-size: 16px;
direction: ltr;
cursor: pointer;
}
.import-modal-select-file-btn {
width: 50px;
}
以下是实时JSBIN链接供您参考。 http://jsbin.com/EWIGUrEL/1/edit
希望它可能会有所帮助。