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

Question

我想在表单中提供文件标记以与标记的其余部分保持一致。所以我想给它一个合适的造型。但通过在互联网上搜索很多，我发现很难实现。我找到了很多答案，但没有任何工作。我希望显示"Choose File"的按钮与其他按钮的样式相同。但没有运气。或者我想要的是我将提供一个文本框和一个文件标签按钮。单击按钮将在内部导致单击文件标记。但我不知道如何使用文件标签获取文件名，以便我在文本框中显示它。我正在使用Linux。有一些解决方案提供了这个功能，但给出了类似"C://fakepath/name"的名称。我不想要这个。我只想要文件名而不是路径。有什么建议吗？

谢谢

Answer 1

尝试使用影子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。