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

今天碰到一个令人头疼的问题,一个输入框的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-DomShadow 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

开启后,你再回去看input的dom节点就能看到里面的结构啦: 
QQ截图20160907224230.png

既然能看到里面的结构,而里面实际也是由各种dom节点组成的,自然也就可以看到应用做里面dom节点的样式啦~


本文由 w3cmark_前端笔记 版权所有,转载时请注明出处。
注明出处格式:w3cmark (http://www.w3cmark.com/2016/502.html)

分享到:

关注w3cmark
微信公众号 w3cmark_com