input的placeholder字体大小无法修改？

作者: 军日期: 2016-09-07

190294

今天碰到一个令人头疼的问题，一个输入框的placeholder显示的字体大小无法修改，很是奇怪，折腾半个小时，get到了一项自己未发现的新技能，下面慢慢道来。
先上图：
QQ截图20160907220259.png

如图，一个普通的input输入框，然后设置了placeholder属性，然后需求是想修改placeholder显示内容的字体大小。我们看到上面其实已经设置了16px，按常理，placeholder的内容字体大小是继承其input大小的，所以习惯性去修改那个16px，结果失败。前往测试地址》》

第一反应，就是当前的设置被覆盖了，所以无论如何修改也无效。因为是非自己页面，在线debug通过chrome的开发者工具找了一圈，就是没找着，都开始怀疑人生了。。。。
未标题-1.jpg

经过一段时间折腾，想起平时如果要设置placeholder的字体颜色，我们是通过伪类来实现的：

input::-webkit-input-placeholder {//webkit内核
　　color: #D6D0CA;
}

那既然可以设置字体颜色，必然可以设置大小，于是乎解决了问题：

input::-webkit-input-placeholder {//webkit内核
　　color: #D6D0CA;
    font-size:18px;
}

当找到解决方法时，道出来貌似没什么，为什么要花那么久时间呢？第一，之前没遇到，不熟悉，没经验。第二，通过上面的测试地址，我们可以发现，这个页面其实是通过iframe了另一个页面，而另一个样式是内联进来的，而里面的example.css样式文件就是个假象，这也是为什么会看到example.css请求了两次（iframe里面和外面都各请求了一次），所以当时查找样式覆盖时忽略了这一点：
QQ截图20160907221915.png

到这里，貌似就可以完了。就这个新技能？估计会被读者骂死（拍死你！！！浪费我的表情~）

别激动，其实还有的！！

通过上面整个分析过程，我们可以发现，如果在开发者工具调试时就能直接看到，样式表已经设置了placeholder的相关样式，那岂不是一眼就能看出问题了？！比如这样：
QQ截图20160907223007.png

这样是不是很赞？？？

其实chrome是有这个东西的，那就是shadow DOM。

什么是Shadow-Dom？Shadow DOM是指浏览器的一种能力，它允许在文档（document）渲染时插入一棵DOM元素子树，但是这棵子树不在主DOM树中。它的最大的用处在于隔离外部环境用于封装组件。

比如说，我们正常写的输入框html代码是这样的：

<input name="password" maxlength="50" placeholder="请输入密码">

然后它就是可以完成内容输入，格式限制，字数限制等功能了。功能甚是强大，其实这个标签对于浏览器来说就是一个封装好的，可以隔离外部的组件。正常下，我们用chrome开发者工具，看到的和我们书写的代码差不多，其实里面内有乾坤，如果你想看到里面的乾坤，那就需要借助Shadow DOM。如何开启chrome的Shadow DOM功能呢？很简单，F12调出开发者工具，然后Settings → General → Elements → Show user agent shadow DOM来开启，或者直接F1快捷键打开设置面板：
QQ截图20160907223904.png
QQ截图20160907223931.png