做有态度的前端团队

网易FEG前端团队

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节点的样式啦~

手机阅读请扫描下方二维码:

已有 90 条评论

  1. 0KeeTeam

    0KeeTeam

  2. 0KeeTeam

    0KeeTeam

    1. admin

      12345678 ali-40.gif

    2. admin

      12345678 ali-40.gif

    3. admin

      12345678 ali-40.gif

  3. mlrnlwfuruhadrpppjno

    0KeeTeam

    1. admin

      12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

    2. admin

      12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif
      expr 856007030 + 972247001

    3. 12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

    4. admin

      12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

    5. admin

      12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-52.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

    6. admin

      12345678 ali-40.gif ali-40.gif

  4. 0KeeTeam

    0KeeTeam

  5. 0KeeTeam

    0KeeTeam

  6. 0KeeTeam

    0KeeTeam

  7. 0KeeTeam

    0KeeTeam

  8. aondihpizwlcvsgudeqp

    0KeeTeam

  9. 0KeeTeam

    0KeeTeam

  10. 0KeeTeam

    0KeeTeam

  11. ogznqtvgnmdkmxadsfhq

    0KeeTeam

  12. 0KeeTeam|expr 939916814 + 877549464

    0KeeTeam

  13. test

    test

  14. test

    test

  15. test

  16. test

    test

  17. test

  18. test

    test

  19. test

    test

  20. test

    test

  21. test

    test

  22. test

    test

  23. test

    test
    expr 999146278 + 975717063

  24. test

  25. test

    test

  26. test

    test

  27. test

    test

  28. test

    test

  29. test

    test

  30. test

    test

  31. test

    test

  32. test

  33. test

    test

  34. test

    test

  35. test

    test

  36. test

    test

  37. test

    test

  38. test

    test

  39. test

    test

  40. test

    test

  41. test

    test

  42. test

    test

  43. test

    test

  44. test

    test

  45. test

    test

  46. test

    test

  47. test

    test

  48. 1

    1 ali-40.gif ali-40.gif ali-41.gif ali-41.gif ali-42.gif ali-42.gif ali-43.gif ali-43.gif ali-44.gif ali-44.gif ali-45.gif ali-45.gif ali-46.gif ali-46.gif ali-47.gif ali-47.gif ali-48.gif ali-48.gif ali-49.gif ali-49.gif ali-50.gif ali-50.gif ali-51.gif ali-51.gif ali-52.gif ali-52.gif ali-53.gif ali-53.gif ali-54.gif ali-54.gif ali-55.gif ali-55.gif ali-56.gif ali-56.gif ali-57.gif ali-57.gif ali-58.gif ali-58.gif ali-59.gif ali-59.gif ali-60.gif ali-60.gif ali-61.gif ali-61.gif

  49. 1

    1 ali-40.gif ali-40.gif ali-41.gif ali-41.gif ali-42.gif ali-42.gif ali-43.gif ali-43.gif ali-44.gif ali-44.gif ali-45.gif ali-45.gif ali-46.gif ali-46.gif ali-47.gif ali-47.gif ali-48.gif ali-48.gif ali-49.gif ali-49.gif ali-50.gif ali-50.gif ali-51.gif ali-51.gif ali-52.gif ali-52.gif ali-53.gif ali-53.gif ali-54.gif ali-54.gif ali-55.gif ali-55.gif ali-56.gif ali-56.gif ali-57.gif ali-57.gif ali-58.gif ali-58.gif ali-59.gif ali-59.gif ali-60.gif ali-60.gif ali-61.gif ali-61.gif

  50. test

    123 ali-40.gif ali-40.gif ali-40.gif ali-40.gif

  51. 1

    1

  52. 1

    1

  53. 1

    1

  54. 1

    1

  55. 1

    1

  56. 1

    1

  57. 1

    1

  58. test

    test

  59. 1

    1

  60. 1

    1

  61. 1

    1

  62. 1

    1

  63. 1

    1

  64. 1

    1

  65. 1

    1

  66. 1

    1

  67. 1

    1

添加新评论

ali-40.gifali-41.gifali-42.gifali-43.gifali-44.gifali-45.gifali-46.gifali-47.gifali-48.gifali-49.gifali-50.gifali-51.gifali-52.gifali-53.gifali-54.gifali-55.gifali-56.gifali-57.gifali-58.gifali-59.gifali-60.gifali-61.gif