bootstrap 4中的自定义输入文件不显示按钮
Soh*_*deh 7 html css twitter-bootstrap twitter-bootstrap-4 bootstrap-4
当我在bootstrap 4中使用自定义输入文件时,请勿更改我的输入并且不显示browse按钮.
<label class="custom-file">
<input type="file" id="Image" class="custom-file-input">
<span class="custom-file-control"></span>
</label>
.custom文件
position: relative;
display: inline-block;
max-width: 100%;
height: 2.5rem;
cursor: pointer;
.custom文件输入
min-width: 14rem;
max-width: 100%;
margin: 0;
filter: alpha(opacity=0);
opacity: 0;
.custom文件控制
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 5;
height: 2.5rem;
padding: .5rem 1rem;
line-height: 1.5;
color: #555;
user-select: none;
background-color: #fff;
border: 1px solid #ddd;
border-radius: .25rem;
Stu*_*art 12
文档说明您应该设置文档的语言.例如,设置只:
<html lang="en">
足以让它工作,除非在@masud_moni回答中,你已经指定了另一种语言然后使用它而不是"en".
小智 11
据我检查 - 你需要插入:之前和:在伪元素之后 - 然后它的工作原理.
.custom-file-control:before{
content: "Browse";
}
.custom-file-control:after{
content: "Add files..";
}
http://codepen.io/powaznypowazny/pen/jBqzgR
- 根据文档的说法,这不是正确的方法.请参阅我的回答以获取更多信息.虽然这可能会使它工作,但它绕过了Bootstrap中内置的一些功能. (2认同)
| 归档时间： |
|
| 查看次数： |
9383 次 |
| 最近记录： |