欢迎来到模板无忧!织梦模板,dede模板下载,织梦cms模板,免费网站模板下载站

模板无忧

怎么样设置placeholder的样式

企业模板

  第一大家来认识一下placeholder是什么?

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

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

  适用范围:

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

  兼容性:

  由于是HTML5中的新增属性,所以会存在兼容性的问题。下面大家来看看浏览器的支持状况:

  2.jpg

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

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

  用户名:<inputtype="text"placeholder="请输入用户名"><br/>

  &nbsp;密&nbsp;码:<inputtype="password"placeholder="请输入密码">

  成效图:

  1.gif

  通常情况下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;

  }

  成效图:

  3.jpg

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

  说明:

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

  注意:

  有的浏览器有我们的::placeholder伪元素非标准达成。所有这类达成都需要浏览器前缀。这类推行方法的示例是::-webkit-input-placeholder,:-ms-input-placeholder(单冒号),并且:-moz-placeholder已Firefox19弃用,目前支持更新的是::-moz-placeholder伪元素。

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


本文转载自中文网


希望以上内容可以解决您的问题!
如有其他问题欢迎大家一起交流学习!
作者:酱油妹 来源:www.nsxcb.cn 关注: 时间:2022-05-10 18:00
版权声明:凡注明来源为http://www.nsxcb.cn的均为本站原创,转载请注明来源。
本文网址:http://www.nsxcb.cn/CSS/CSS3/20220510/14148.html
凡本站提供教程均已验证教程的准确性。
相关教程
在线客服

织梦模板 整站模板 新手教程 使用技巧