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

This question already has an answer here:

这个问题在这里已有答案：

• Styling an input type=“file” button 40 answers
• 样式输入类型=“文件”按钮40答案

I just found this:

我刚发现这个：

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

如何自定义？

But it hides the entire input element. In my case, I'm using Django's form and there is text like "no file selected" or after you choose a file, the file name shows up. I want to keep those bits but customize only the button part of the input element.

但它隐藏了整个输入元素。在我的情况下，我正在使用Django的表单，并且有“无文件选择”等文本，或者在您选择文件后，文件名显示出来。我想保留这些位，但只自定义输入元素的按钮部分。

See below for current approach.

请参阅下面的当前方法。

But I want something like the styled one below but that retains the text in the previous images.

但我想要下面的样式，但保留以前图像中的文本。

Is there a way to do this?

有没有办法做到这一点？

EDIT

编辑

I guess I should have been clearer. I saw all the other answers out there but my question is different. First of all, I know how to add attributes to the form class. I'm already doing this. Secondly, the images I attached were from my code. In other words, I already implemented the answers in the so-called duplicates.

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

My question pertains to the text next to the actual button that says "Browse". I want to style the button but KEEP the text, because this text is dynamic and changes with user action.

我的问题与实际按钮旁边的文字“浏览”有关。我想设置按钮的样式，但保留文本，因为此文本是动态的，并随用户操作而变化。

As far as I can tell, the other answers (and my assumption) is that the entire element gets styled with the custom CSS, so when it's hidden or obscured, the text is also hidden.

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

Given this, can anyone propose an answer?

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

Solution

解

Thanks to @lmgonzalves, I have realized that my problem was hiding the entire element. I should have just made a button overlay with the custom button like the accepted answer. Thanks again!

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

2 个解决方案

#1

I have create a demo for you, check:

我为你创建了一个demo，检查：

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

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

The icon is with font-awesome, and here is the code.

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

HTML:

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:

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;
}

#2

You should set a id or class HTML attribute via Widgets.attrs and customize via CSS, just like this:

您应该通过Widgets.attrs设置id或类HTML属性，并通过CSS自定义，如下所示：

Django Form

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

CSS

#upload {
 /* ... */
}

Helpful links:

有用的网址：

• Base Widget classes
• 基本小部件类
• Widget.attrs
• Widget.attrs