input、textarea中placeholder属性设置的兼容性问题

一、问题描述

问题很简单：input和textarea包含其中的placeholder的自带属性实在有点闹心，因此需要对它们超微美化一下。然而问题就来了。

先附效果图：

firefox下是这样子滴~



ie：



最后是chrome：



代码如下：



经过本人各种尝试，终于成功。着重看红框圈出来的地方是不是超微有些不同呢？

二、深入探索

首先让我们共同回忆下伪类和为元素的知识点！

1、定义

在css1及css2中伪类与伪元素的定义比较模糊，用法也较为类似，但是在css3中对伪类、伪元素有了较为清晰的定义。

伪类：

伪类存在的意义是为了通过选择器找到那些不存在与DOM树中的信息以及不能被常规CSS选择器获取到的信息。

伪类由一个冒号

:

开头，冒号后面是伪类的名称和包含在圆括号中的可选参数。

任何常规选择器可以再任何位置使用伪类。伪类语法不区别大小写。一些伪类的作用会互斥，另外一些伪类可以同时被同一个元素使用。并且，为了满足用户在操作DOM时产生的DOM结构改变，伪类也可以是动态的。

其实第一句话已经概括出了伪类的全部含义，并说出了伪类的两个功能：

            1、获取不存在于DOM中的信息，比如<a>标签中的hover；

            2、获取不能被常规css选择器获取的信息，如：target；

伪元素：

伪元素在DOM树中创建了一些抽象元素，这些抽象元素是不存在于文档语言里的（可以理解为html源码）。比如：documen接口不提供访问元素内容的第一个字或者第一行的机制，而伪元素可以使开发者可以提取到这些信息。并且，一些伪元素可以使开发者获取到不存在于源文档中的内容（比如常见的

::before

,

::after

）。

伪元素的由两个冒号

::

开头，然后是伪元素的名称。

使用两个冒号

::

是为了区别伪类和伪元素（CSS2中并没有区别）。当然，考虑到兼容性，CSS2中已存的伪元素仍然可以使用一个冒号

:

的语法，但是CSS3中新增的伪元素必须使用两个冒号

::

。

一个选择器只能使用一个伪元素，并且伪元素必须处于选择器语句的最后。

注：不排除未来会加入同时使用多个伪元素的机制。

最后总结一下两者的区别：

1、伪类本质上是为了弥补css选择器的不足，获取到更多css选择器获取不到的信息；

  2、伪元素本质上是创建了一个有内容的虚拟容器；

3、css3中伪类与伪元素的语法不同，：是伪类、：：是伪元素；

  4、可以同时使用多个伪类，而只能同时使用一个伪元素；

三、兼容性问题

  在回顾了伪类与伪元素的概念后，再看上述代码，要严格区分伪类与伪元素的用法，还有针对不同浏览器写法上的细微不同。以上