Question

我正在使用Bootstrap 4 Custom File Chooser，并对其进行了修改，以使“浏览”按钮出现在左侧。这是代码：

HTML：

<div class="custom-file">
    <input id="application-resume" class="custom-file-input" type="file">
    <label class="custom-file-label" for="application-resume">
        Choose file (pdf, docx, doc, odt)
    </label>
</div>

CSS：

/* Disabling the default Browse pseudo element */
.custom-file-label::after {
    content: none;
} 

.custom-file-input:lang(en) ~ .custom-file-label::after {
    content: none;
}

/* Overriding Bootstrap's Custom File classes */
.custom-file {
    cursor: pointer !important;
}

.custom-file-input {
    cursor: inherit !important;
}

.custom-file-label {
    cursor: inherit !important;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0.75rem;
    padding-bottom: 0.75rem;
}

.custom-file-label::before {
    content: "Browse";
    display: inline-block;
    height: 2.25rem;
    padding: 0.375rem 0.75rem;
    margin-right: 0.25rem;
    line-height: 1.5;
    color: #495057;
    background-color: #e9ecef;
    border-right: 1px solid #ced4da;
    border-radius: 0.25rem 0 0 0.25rem;
}

:lang(en) .custom-file-input ~ .custom-file-label::before {
    content: "Browse";
}

.custom-file-input:focus ~ .custom-file-label::before {
    border-color: #80bdff;
}

.input-group > .custom-file:not(:last-child) .custom-file-label::before {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.was-validated .custom-file-input:valid ~ .custom-file-label::before, .custom-file-input.is-valid ~ .custom-file-label::before {
    border-color: inherit;
}

.was-validated .custom-file-input:invalid ~ .custom-file-label::before, .custom-file-input.is-invalid ~ .custom-file-label::before {
    border-color: inherit;
}

因此，一切看起来都很完美，除了cursor: pointer;在Firefox上可以按预期工作（光标在整个自定义文件组件上显示为指针），但在Chrome和Opera上都没有，光标默认显示为1组件的/ 4，并作为其余部分的指针：

this is the image

我不明白为什么会这样，因为我拥有自定义文件组件的所有元素（父div，输入和标签），在CSS中具有cursor: pointer;（子元素为cursor: inherited;）。

感谢您的答复。

Answer 1

尝试文本缩进：-999px；对于输入[type =“ file”]，它将解决此问题。

Answer 2

我也遇到了同样的问题，我用下面的代码修复了

.custom-file-input {
  z-index: -1;
}

.custom-file-label {
  z-index: 1;
  cursor: pointer;
}

将Bootstrap的自定义文件输入光标设置为指针

2 个答案: