自定义占位文本(placeholder)的样式

William_Sang 发布于2019-08-30 11:11 / 2833人阅读

摘要：自定义占位文本的样式当我们对元素或者元素写样式的时候如果需要自定义占位文本也就是的样式的时候怎么办有一个伪元素选择器可以解决我们的问题用法我是红色的结果但要注意这个伪元素选择器是一个实验性的特性还需要一些时日待浏览器兼容因此我们要添加一

自定义占位文本(placeholder)的样式

当我们对input元素或者textarea元素写CSS样式的时候, 如果需要自定义占位文本(也就是placeholder)的样式的时候怎么办?
CSS有一个伪元素选择器::placeholder可以解决我们的问题.

用法

HTML

CSS

input::placeholder {
  color: red;
  font-size: 1.2em;
  font-style: italic;
}

结果

但要注意, 这个伪元素选择器是一个实验性的特性, 还需要一些时日待浏览器兼容.
因此, 我们要添加一些前缀来使用它, 如下所示.

input::-webkit-input-placeholder {
    color: #999;
}
/* IE10+ */
input:-ms-input-placeholder {
    color: #999;
}
/* Firefox4-18 */
input:-moz-placeholder {
    color: #999;
}
/* Firefox19+ */
input::-moz-placeholder {
    color: #999;
}
input::placeholder {
  color: #999;
}

textarea::-webkit-input-placeholder {
    color: #999;
}
/* IE10+ */
textarea:-ms-input-placeholder {
    color: #999;
}
/* Firefox4-18 */
textarea:-moz-placeholder {
    color: #999;
}
/* Firefox19+ */
textarea::-moz-placeholder {
    color: #999;
}
textarea::placeholder {
  color: #999;
}

参考链接:
MDN - ::placeholder
Can I Use - ::placeholder

GPU云服务器云服务器自定义按钮样式 h5视频播放器可自定义样式自定义镜像的使用请教自定义控件的问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114828.html

转：CSS :placeholder-shown伪类实现Material Design占位符交互效果

摘要：转自伪类实现占位符交互效果一规范中占位符交互效果风格占位符交互效果官方示意见此页面。我们可以采用绝对定位最后，对这个元素在输入框时候，以及非显示的时候进行重定位缩小并位移到上方四清除按钮部分上是必要属性，配合伪类实现我们的效果。转自： https://github.com/yougola/bl... CSS :placeholder-shown伪类实现Material Design占...

gaara 2019-08-30 15:44 评论0 收藏0
CSS :placeholder-shown伪类实现输入框浮动文字效果

摘要：输入框的属性允许您指定没有输入内容时出现在元素内的文本。当输入框被激活并开始输入内容时，元素会浮动显示在输入框的上方。纯实现浮动的标签文字注册事件，判断是否输入有值，隐藏一个元素，并根据输入框是否有内容来决定是否显示这个元素。在这篇文章中，我们将使用:placeholder-shown伪类创建一个浮动的问题标签效果，使用纯CSS实现。 showImg(https://segmentf...

arashicage 2019-08-30 11:09 评论0 收藏0
CSS :placeholder-shown伪类实现输入框浮动文字效果

摘要：输入框的属性允许您指定没有输入内容时出现在元素内的文本。当输入框被激活并开始输入内容时，元素会浮动显示在输入框的上方。纯实现浮动的标签文字注册事件，判断是否输入有值，隐藏一个元素，并根据输入框是否有内容来决定是否显示这个元素。在这篇文章中，我们将使用:placeholder-shown伪类创建一个浮动的问题标签效果，使用纯CSS实现。 showImg(https://segmentf...

junbaor 2019-08-02 15:17 评论0 收藏0
CSS :placeholder-shown伪类实现输入框浮动文字效果

摘要：输入框的属性允许您指定没有输入内容时出现在元素内的文本。当输入框被激活并开始输入内容时，元素会浮动显示在输入框的上方。纯实现浮动的标签文字注册事件，判断是否输入有值，隐藏一个元素，并根据输入框是否有内容来决定是否显示这个元素。在这篇文章中，我们将使用:placeholder-shown伪类创建一个浮动的问题标签效果，使用纯CSS实现。 showImg(https://segmentf...

MingjunYang 2019-08-23 18:04 评论0 收藏0
《DOM编程艺术》中初步实现的图片库的总结（一）

摘要：灰姑娘灰姑娘灰姑娘不足点击事件绑定在代码中，很笨重，下一篇中将做升级。前言：在《DOM编程艺术》一书中，作者给出了一个实例：创建一个图片库，其实功能很简单，就是点击某个列表项时，下方出现相应的图片以及图片说明（图片说明事先以title的形式写在HTML中），虽然是一个简单的例子，当时作者在书中循序渐进，不断的改善图片库中间引入各种知识点，真的是一本好书，在此对这个实例进行一些总结。 ...

Yi_Zhi_Yu 2019-08-19 18:31 评论0 收藏0