Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

ShadowDOM与原生控件

  原生控件的样式是浏览器自己提供的,通常我们只能修改原生控件表面的样式,无法修改其内部的样式。但在Chrome上,一些原生控件也是用类似于ShadowDOM的东西封装的,既然我们可以用CSS穿透ShadowDOM操作,应该也可以穿透这些原生封装来修改其内部样式。
<style>
.btn1 [type=button] {border:1px solid red;}
.btn2 /deep/ [type=button] {border:1px solid red;}
</style>
<input type="file" class="btn1" />
<input type="file" class="btn2" />

  上面的例子就是使用/deep/来穿透原生控件修改其内部样式。于是我们就可以这样:
<style>
[type=file] {font-size:0px;}
[type=file] /deep/ [type=button] {
  width:120px;
  font-size:12px;color:transparent;
}
[type=file]:before {
  content:'我是上传按钮';
  position:absolute;width:120px;
  font:12px/20px Simsun;text-align:center;
  pointer-events:none;
}
</style>
<input type="file" />
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^