如何设置html文件标签的样式？

我想在我的表单中给文件标签，以便和标签的其余部分保持一致。所以我想给它一个合适的造型。但通过在互联网上大量搜索，我发现这很难实现。我找到了很多答案，但都不管用。我希望显示

“选择文件”

的按钮可以与其他按钮的样式相同。但是没有运气。或者我想要的是，我将提供一个文本框和一个文件标签上的按钮。单击按钮将在内部导致单击文件标记。但我不知道如何使用文件标签选择文件名，以便在文本框中显示它。我正在使用Linux。有些解决方案提供了此功能，但名称类似于

“C://fakepath/name”

。我不想要这个。我只需要文件名而不是路径。有什么建议吗

---

谢谢

尝试使用阴影dom选择器

/*styles the button*/
input[type="file"]::-webkit-file-upload-button{background-color:red; color:white; }
/*styles the file name*/
input[type="file"]{color:red; }

---

不确定它在Linux上如何工作，但在OS X上显示fileName.extension。

尝试使用阴影dom选择器

/*styles the button*/
input[type="file"]::-webkit-file-upload-button{background-color:red; color:white; }
/*styles the file name*/
input[type="file"]{color:red; }

---

不确定它在Linux上如何工作，但它在OS X上显示fileName.extension。

你不能，你可以使用javascript来伪造它。隐藏它并使用其他元素，这些元素将检索值并将操作发送到输入文件。好的，谢谢，我将尝试执行某些操作。@SumitRathore尝试在文件标记周围包装一个标签标记。（在JSFIDLE中，单击红色框）@DennisMartinez非常感谢，但是Alpha的解决方案正是我想要的。你不能，你可以使用javascript来伪造它。隐藏它并使用其他元素，这些元素将检索值并将操作发送到输入文件。好的，谢谢，我将尝试执行某些操作。@SumitRathore尝试在文件标记周围包装一个标签标记。（在JSFIDLE中，单击红色框）@DennisMartinez非常感谢，但Alpha的解决方案正是我想要的。