如何在 Django 表单中*仅*隐藏输入类型文件的按钮（不是整个元素）？

Question

我刚找到这个：

How to customize <input type="file">?

但它隐藏了整个 input 元素。在我的例子中，我使用的是 Django 的 form 并且有像 "no file selected" 这样的文本，或者在你选择一个文件之后，文件名就会显示出来。我想保留这些位，但只自定义 输入元素的按钮部分。

请参阅下面的当前方法。

但我想要类似下面样式的东西，但它保留了之前图像中的文本。

有办法吗？

编辑

我想我应该更清楚。我在那里看到了所有其他答案，但我的问题是不同的。首先，我知道如何给表单添加属性class。我已经在做这个了。其次，我附上的图片来自我的代码。换句话说，我已经在所谓的重复中实现了答案。

我的问题与显示 "Browse" 的实际按钮旁边的文本有关。我想为按钮设置样式，但 KEEP 文本，因为该文本是动态的，会随着用户操作而变化。

据我所知，其他答案（和我的假设）是整个元素都使用自定义样式 CSS，因此当它被隐藏或遮盖时，文本也会被隐藏。

鉴于此，任何人都可以提出答案吗？

解决方案

感谢@lmgonzalves，我意识到我的问题是隐藏了整个元素。我应该像接受的答案一样用自定义按钮制作一个按钮覆盖。再次感谢！

Answer 1

您应该通过 Widgets.attrs 设置 id 或 class HTML 属性并通过 CSS 自定义，就像这样：

Django 表单

class MyForm(forms.Form):
    name = forms.FileField(widget=forms.FileInput(attrs={'id': 'upload'}))

CSS

#upload {
 /* ... */
}

有用的链接：

• Base Widget classes
• Widget.attrs

Answer 2

我已经为你创建了一个演示，查看：

https://jsfiddle.net/lmgonzalves/uLmLc3xt/5/

图标是font-awesome，这里是代码

HTML:

<label id="upload-file-container" for="photo">
    <input id="photo" type="file" name="photo"/>
    <span class="upload-file-wrapper">
        <i class="fa fa-cloud-upload"></i>
        <span>Click here to upload file</span>
    </span>
</label>

CSS:

#upload-file-container{
    position: relative;
    cursor: pointer;
}

#upload-file-container input{
    position: relative;
    left: 150px; /* Maybe you need to adjust this */
    top: 5px;
}

#upload-file-container .upload-file-wrapper{
    position: absolute;
    left: 0;
    top: -1px;
    background-color: lightgray;
    border: 1px solid gray;
    padding: 5px 0 6px;
    width: 250px;
    text-align: center;
}