链接如下

其实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. cygwin的安装使用

    Cygwin 是一个用于 Windows 的类 UNIX shell 环境. 它由两个组件组成:一个 UNIX API 库,它模拟 UNIX 操作系统提供的许多特性:以及 Bash shell 的改写 ...

  2. 尝试使用Memcached

    尝试使用Memcached遇到的狗血问题   乘着有时间,尝试下利用Memcached进行分布式缓存,其中遇到了不少问题及狗血的事情,开篇记录下,希望对您有帮助. 我之前的项目为:Asp.Net MV ...

  3. 自定义表单-jsonform

    项目文件地址:https://github.com/powmedia/backbone-forms#editor-list DEOM:http://jsfiddle.net/evilcelery/dW ...

  4. asp.net 的一个简单进度条功能

    我们先看下效果 我点击了按钮后他会显示进度页面,进度完成后,进度条消失,其实也是比较简单的了. 我们需要一个进度条代码文件ProgressBar.htm(注意:是没有head这些标签的) <sc ...

  5. 百度云语音识别,Audio2Txt(c#)

    百度云识别没有提供c#版本的sdk,下面给个c#的 1.打开网址http://developer.baidu.com/ 2.登陆 3.管理控制台>开发者服务管理 4.创建工程 5.输入名称,点击 ...

  6. 迟到的 WPF 学习 —— 控件

    这一章书中内容比较多而杂,但每个对象的内容又相对简短,所以只挑选里边有代表性的内容做记录. 1. Label 控件:一个基础的简单的 ContentControl,Labe 支持快捷键文本的设置,可以 ...

  7. 聊天工具mychat

    python学习,自己写了个简单聊天工具mychat 最近在学习python,自己写了个最最简单的聊天工具mychatv0.1. 第一版,完成基本的聊天功能. GUI用的是自带的TKinter,用到的 ...

  8. IOS学习之路八(GCD与多线程)

    GCD,全称Grand Central Dispath,是苹果开发的一种支持并行操作的机制.它的主要部件是一个FIFO队列和一个线程池,前者用来添加任务,后者用来执行任务. GCD中的FIFO队列称为 ...

  9. Make Things Move -- Javascript html5版(二)实现最基本的Sprite类和stage管理对象

    现在这几篇写的都是比较基础的东西,有过相应开发经验的朋友可直接忽略啦. 计算机模拟的动画都是由很多静态的一连串影像(sprite)在一定帧率(fps)内逐帧播放出来的. 对于js来说,我们可以用提供的 ...

  10. MyEclipse修改默认的workspace路径

    在此只提供一个自己认为可行的办法(已验证可行) 已MyEclipse8.5为例 打开安装路径C:\Program Files\Genuitec\MyEclipse 8.5\configuration下 ...