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

标签 html css

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

谢谢

最佳答案

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

关于html - 如何设置html文件标签的样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20315889/

相关文章:

css - 如何折叠标题中的文本,同时保持按钮右对齐?

jquery - Css 选择器 - 选择所有同级直到某个同级

html - 如何隐藏三个相同元素的第一个和最后一个元素

javascript - 视差滚动如何工作?

php - 需要稍微改变表格的布局

html - 字体问题: HTML field types "text" and "textarea" are displaying different fonts

html - 下拉 CSS 不工作(Laravel Blades)

html - 使用 bootstraps 创建的 Navbar 左右都有空白

html - 保护纯 HTML 站点的技术

jquery - 在等高列中定位元素