CSS3占位符伪元素浅析

欢迎您访问我爱IT技术网，今天小编为你分享的电脑教程是建站经验系列之：【CSS3占位符伪元素浅析】，下面是详细的分享！

CSS3占位符伪元素浅析

　　HTML5的特性曾经充斥着各种互联网社区，现在，它的特性越来越多的被各种浏览器所支持 ，我们可以使用它的更多的功能，如自定义文本的外观

　　::input-placeholder CSS伪元素，无论输入什么字段，该元素都为我们提供了一个符合设计标准的占位符文本的样式。

　　占位符文本的样式

　　浏览器预定义的样式，可以通过占位符属性显示文本。默认情况下，文本是一个浅灰色的，这种情况下难以阅读。当开发人员发现，没有任何CSS样式选项可用于占位符之后。 我们发现::input-placeholder伪元素，可以让我们摆脱UA规范，提供更多的造型灵活性。

　　例如，让我们使用下面的占位符，并改变其颜色和文字：

 <input type="text" placehold

er="I'm placeholder text!">

　　然后，我们将使用新的伪元素创建一个CSS规则：

 input::-webkit-input-placeholder {

    color: rgba(0,5,143,.5);

    text-transform: uppercase;

 }

　　单独定义选择器(否则将被忽略整个规则的浏览器)

  input::-webkit-input-placeholder {

         color: rgba(0,5,143,.5);

         text-transform: uppercase;

 }

 input::-moz-placeholder {

         color: rgba(0,5,143,.5);

         text-transform: uppercase;

 }

 input:-moz-placeholder {   

         color: rgba(0,5,143,.5);

         text-transform: uppercase;

 }

 input:-ms-input-placeholder { 

         color: rgba(0,5,143,.5);

         text-transform: uppercase;

 } 

　　占位符属性选择器

　　是否要有一个占位符属性的[placeholder]选择器，完全是由输入字段决定的：

 input[placeholder] {

    font-weight: bold;

    border-color: blue;

 }

　　现在，每一个输入字段，就有一个占位符属性将变成字体粗细和蓝色的边框。

　　我们可以使用哪些属性?

　　并非所有的CSS属性都支持::input-placeholder规则。 事实上，只有极少数的CSS熟悉才支持，其中最有用的如：

　　color

　　font-size

　　font-style

　　font-weight

　　letter-spacing

　　line-height

　　padding

　　text-align

　　text-decoration

　　重要的是，占位符样式并不会影响它的盒子模型。

　　浏览器支持

　　目前支持::input-placeholder伪元素的浏览器有 Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6 and IE10.。 从上文的分析我们可以知道即使这样小的增强功能帮助我们做出了长足的进步，继而产生良好的用户体验。

以上所分享的是关于CSS3占位符伪元素浅析，下面是编辑为你推荐的有价值的用户互动：

　　相关问题：css中什么是伪类和伪元素？？通俗点

　　答：那个推荐答案说的真虎，我说说吧，伪元素可以独自使用，伪类不可以，CSS3中规定伪元素用双冒号表示，伪类用单冒号表示。。。。。。。。伪类就是方便。。伪元素也很多，可以设置滚动条样式，可以设置类里面的首字的样式等，而伪类。。。。。。 没... >>详细

　　相关问题：伪类选择器和伪元素选择器的区别

　　答：伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。 >>详细

　　相关问题：css3的attr表达式问题

　　答：content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。该属性用于定义元素之前或之后放置的生成内容. 你可以改一下img的src属性 >>详细