1 |
|
在这个代码中的HTML结构很简单，就一个[input标签就可以了，比前面看到的方法简洁多了，但是对于兼容性而言肯定是差多了，不晓得在手机端是怎么样，现在手机端大部分都是webkit内核的浏览器，算了，且当娱乐，看之乐之吧～
简单的HTML结构修改样式完全是依赖于::-webkit-file-upload-button这个伪元素，针对这个伪元素的样式做相对应的修改即可了，因为这个是一个普通的按钮元素而已。这个按钮元素如果通过展示shadow DOM的方式来查看的话，我们会更清晰。
这是chrome开发者工具中看到的DOM树，一般而言，我们如果没开启查看shadow DOM的话，是看不到一个type="file"的input中还包含这么多内容。开启的方式很简单，点击开发者工具右上角的齿轮，然后在弹出的层中把这个勾打上就可以了。
现在各位看官可以自行查看一下其他input标签了，如果有shadow DOM的话，必然可以展开。然后在HTML5新的标签中，有一些也是有的……
最后
对于type="file"的input标签，目前来说，我所知道的可以修改样式方法就这两个，然后针对webkit的方案也很有局限，但对于手机端来说应该没什么问题。或许有人说，那其他浏览器怎么办啊，是啊，怎么办呢，我也不知道。
在Firefox浏览器中，虽然有一个选择符input type="file" > button[type="button"]存在与forms.css中，但是不知道为什么，我在自己的样式添加这个选择符后，还是没看到任何效果，所以就没再继续玩下去了。
PS：对于form.css这个文件，如果是Firefox浏览器的粉丝，必然知道resource://gre-resources/forms.css这个路径的存在。
相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
相关阅读：
怎样解决在html中竖列文字竖列显示不全的问题
html怎样使用超链接打开新窗口并且控制该窗口属性
html怎样使用style添加属性
以上就是type="file"的input框样式应该如何操作的详细内容，更多文章请关注木庄网络博客！
相关阅读 >>
input，button，textarea等表单元素防止重复点击
浅谈input中的name，value以及label中的for
更多相关阅读请进入《input》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
