HTML5中如何设置placeholder的样式

发布时间:2022-03-08 13:56:10 作者:小新
来源:亿速云 阅读:256

这篇文章主要介绍了HTML5中如何设置placeholder的样式,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

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

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

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

  适用范围:

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

  兼容性:

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

  2.jpg

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

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

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

  &nbsp;密&nbsp;码:<inputtype="password"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伪元素来设置placeholder属性样式的。在css3中,伪元素::placeholder是用于设置对象文字占位符的样式。

  说明:

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

  注意:

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

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

感谢你能够认真阅读完这篇文章,希望小编分享的“HTML5中如何设置placeholder的样式”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!

推荐阅读:
  1. html5中placeholder的使用
  2. css中修改placeholder的样式

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

html5 placeholder

上一篇:宝塔如何设置取消dedecms的data、uploads

下一篇:怎么设置CSS的FlexBox的最小列宽

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》