08月19, 2019

inspect placeholder with chrome devtool

背景

设置placehoder的颜色发现不起作用。后来发现其实起作用了,但好像有透明度的变化。但往上找dom均没有发现有修改opacity的地方。

盲区

  1. 无法在dom里面看到placeholder的样式导致无法知道placeholder的具体颜色
  2. 一直在查看input以及向上查找div对应的opacity,未想到placehoder本身除了被修改了颜色,还被修改了opacity

改进措施

  1. placehoder支持的css rules与::first-line支持的规则一致。查看css4的规范可看到支持的属性。主要是与font/text/background相关的属性。 alt

  2. 在chrome开发者工具中,点击更多 -> settings 设置

勾选Elements下的show user agent shadow DOM

show user agent shadow DOM

参考

  1. https://stackoverflow.com/questions/26852922/inspect-webkit-input-placeholder-with-developer-tools
  2. https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder
  3. https://drafts.csswg.org/css-pseudo-4/#placeholder-pseudo
  4. https://drafts.csswg.org/css-pseudo-4/#first-text-line

本文链接:http://fengbaiyang.cn/post/inspect-placeholder-with-chrome-devtool.html

-- EOF --

Comments

暂不支持评论,如有问题,请发邮件至baiyang.feng@outlook.com。 望不吝赐教~