手揣网教程:绿色安全纯净官方版,体验当今速度最快的浏览器!

css3如何设置placeholder的样式

时间:2024/6/18作者:未知来源:手揣网教程人气:

[摘要]本篇文章给大家带来的内容是介绍如何使用css3设置placeholder的样式,让大家了解placeholder是什么,如何使用,如何修改修改(设置)其样式。有一定的参考价值,有需要的朋友可以参考一...
本篇文章给大家带来的内容是介绍如何使用css3设置placeholder的样式,让大家了解placeholder是什么,如何使用,如何修改修改(设置)其样式。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

首先我们来了解一下placeholder是什么?

placeholder是HTML5新增的一个属性,该属性的作用是规定可描述输入字段预期值的简短的提示信息,这个提示会在用户输入之前显示在输入框中,然后在用户输入字段后消失。【相关视频教程推荐:HTML5教程】

根据浏览器的不同,当输入字段(框)成为焦点时,该提示信息(占位符)可能会保持可见,也可能不会保持可见。例如,IE10 +将在输入聚焦时会隐藏,即使它仍为空。

适用范围:

placeholder 属性适用于下面的 input 类型:text、search、url、tel、email 和 password。

兼容性:

因为是HTML5中的新增属性,所以会存在兼容性的问题。下面我们来看看浏览器的支持情况:

css3如何设置placeholder的样式

表格中的数字表示支持该属性的第一个浏览器版本号。

placeholder属性的基本用法,举例说明:

用户名:<input type="text" placeholder="请输入用户名"> <br />
&nbsp;密&nbsp;码:<input type="password" placeholder="请输入密码">

效果图:

css3如何设置placeholder的样式

一般情况下placeholder属性会有自己默认的样式,当有时为了页面的整体美观,我们就想要自定义样式,那么如何来设置placeholder的样式?

下面我们就通过简单的代码示例来介绍使用css3设置placeholder的样式的方法。

css3设置placeholder的样式代码示例:

input::-webkit-input-placeholder {
  color: palevioletred;
}

input::-moz-placeholder {
  color: palevioletred;
}

input:-ms-input-placeholder {
  color: palevioletred;
}

input::-webkit-input-placeholder {
  color: palevioletred;
}

input::placeholder {
  color: palevioletred;
}

效果图:

css3如何设置placeholder的样式

可以看出,我们是通过css3的::placeholder伪元素来设置placeholder属性样式的。在css3中,伪元素::placeholder是用于设置对象文字占位符的样式。【相关视频教程推荐:CSS3教程】

说明:

::placeholder 伪元素用于控制表单输入框占位符的外观,它允许开发者/设计师改变文字占位符的样式,默认的文字占位符为浅灰色。当表单背景色为类似的颜色时它可能效果并不是很明显,那么就可以使用这个伪元素来改变文字占位符的颜色。

注意:

有些浏览器有自己的::placeholder伪元素非标准实现。所有这些实现都需要浏览器前缀。这些实施方式的示例是::-webkit-input-placeholder,:-ms-input-placeholder(单冒号),并且:-moz-placeholder已Firefox 19弃用,现在支持更新的是::-moz-placeholder伪元素。

除了Firefox是 ::[prefix]placeholder,其他浏览器都是使用 ::[prefix]input-placeholder。

伪元素::placeholder的兼容性:

css3如何设置placeholder的样式

::-moz-placeholder 伪元素在Firefox 19+后替代了之前的 :-moz-placeholder 伪类

总结:以上就是本篇文章的全部内容,希望能对大家的学习有所帮助。

以上就是css3如何设置placeholder的样式的详细内容,更多请关注php中文网其它相关文章!


网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



关键词:css3如何设置placeholder的样式




Copyright © 2012-2018 手揣网教程(http://www.shouchuai.com) .All Rights Reserved 网站地图 友情链接

免责声明:本站资源均来自互联网收集 如有侵犯到您利益的地方请及时联系管理删除,敬请见谅!

QQ:1006262270   邮箱:kfyvi376850063@126.com   手机版