链接如下

其实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来开启

开启后,你再回去看input的dom节点就能看到里面的结构啦: 

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

转自:http://www.w3cmark.com/2016/502.html

input的placeholder字体大小无法修改?的更多相关文章

  1. css设置input中placeholder字体

    设置input中placeholder字体颜色 input::-webkit-input-placeholder {color:@a;} input:-moz-placeholder {color:@ ...

  2. 改变input的placeholder字体颜色

    改变input的placeholder字体颜色,注意哦,只是placeholder的字,用户输入的字不可以 input::-webkit-input-placeholder{ coloc:#000; ...

  3. 【纯代码】Swift-自定义PickerView单选(可修改分割线颜色、修改字体大小、修改字体颜色。)(可根据需要自己扩展)

    typealias PopPickerViewCallBackClosure = (_ resultStr:NSString?) -> () class PopPickerView : UIVi ...

  4. swift修改UITextfield的Placeholder字体大小和颜色

    第一种方法: self.userNumber.setValue(UIColor.lightGray, forKey: "_placeholderLabel.textColor") ...

  5. Eclipse设置问题:字体大小、修改注释内容、修改快捷键

    一.设置字体大小,看下图,包括了设计代码字体大小和控制台输出字体大小 二.修改注释内容 选择window---->>preferences 选择Java---->>code s ...

  6. 设置input标签placeholder字体颜色

    有时会遇到这样的需求,输入框的默认提示文字与用户输入的文字不同. <input className="city" placeholder="城市"/> ...

  7. css 修改placeholder字体颜色字体大小 修改input记住账号密码后的默认背景色

     壹 ❀ 引 本来这个阶段的项目页面都是给实习生妹子做的,我只用写写功能接接数据,但这两天妹子要忙翻译,这个工作阶段也快结束了导致有点慌,只能自己把剩余的几个小页面给写了. 那么做页面的过程中,UI也 ...

  8. input修改placeholder中颜色和字体大小

    input::-webkit-input-placeholder { /* placeholder颜色 */ color: #aab2bd; /* placeholder字体大小 */ font-si ...

  9. 解决input 中placeholder的那些神坑

    **昨天后台小哥哥提到placehold无法显示问题,我这边总结一下,顺便写个小文章分享给大家..** ============================================== 一 ...

随机推荐

  1. Angularjs web应用

    构建兼容浏览器的Angularjs web应用 背景 随着mvvm逐渐成熟,现在使用jQuery构建web应用已经显得过时了,而且使用jQuery需要编写更多的代码去控制dom的取值.赋值.绑定事件等 ...

  2. NServiceBus 入门2

    NServiceBus官方文档翻译(二)NServiceBus 入门   在这篇教程中我们将学习如何创建一个非常简单的由客户端向服务端发送消息的订单系统.该系统包括三个项目:Client.Server ...

  3. viewstate cookie和session原理回顾

    --个人理解会存在些错误仅供参考!!! ----浏览器保持会话状态原理 用户发送一次请求,服务器端会检索报文中是否存在sessionid不存在,就分配一个写到cookie当中,存在浏览器的缓存中,当再 ...

  4. boost------signals2的使用1(Boost程序库完全开发指南)读书笔记

    signals2基于Boost的另一个库signals,实现了线程安全的观察者模式.在signals2库中,观察者模式被称为信号/插槽(signals and slots),他是一种函数回调机制,一个 ...

  5. 《剑指Offer》面试题-从头到尾打印链表

    题目描述: 输入一个链表,从尾到头打印链表每个节点的值. 输入: 每个输入文件仅包含一组测试样例.每一组测试案例包含多行,每行一个大于0的整数,代表一个链表的节点.第一行是链表第一个节点的值,依次类推 ...

  6. 实现 ready和bind事件

    Jquery揭秘系列:实现 ready和bind事件   讲这一节之前,先回顾之前的一篇<小谈Jquery>里面的代码: (function (win) { var _$ = functi ...

  7. sprinfmvc学习--01

    springmvc框架是一个基于请求驱动的web框架,使用了前端控制器模式来设计.根据请求映射规则分发给相应的页面控制器进行处理. 1.  首先用户发送请求-->DispatcherServle ...

  8. QuickWebApi:使用Lambada方式,完成对WebApi的开发和调用。

    QuickWebApi 目的:使用Lambada方式,完成对WebApi的开发和调用. 缘由:为了解耦服务和展现,将越来越多的使用WebApi提供各种服务:随着服务的细化,WebApi的接口将越来越多 ...

  9. C++之Effective STL

    今天看了下websocket的知识,了解到这是html5新增的特性,主要用于实时web的通信.之前客户端获取服务端的数据,是通过客户端发出请求,服务端进行响应的模式,或者通过ajax每隔一段时间从后台 ...

  10. tomcat安装和基本配置

    首先,默认电脑上已经配置好java环境. 在http://tomcat.apache.org/这里下载tomcat二进制版本,下载到本地后随意解压在某个盘, 我解压在D:\apache-tomcat- ...