龙空技术网

如何修改Placeholder(占位符) 的样式

独绽2018 74

前言:

而今兄弟们对“图片占位符更改图片”大致比较看重,咱们都需要分析一些“图片占位符更改图片”的相关知识。那么小编在网上网罗了一些有关“图片占位符更改图片””的相关资讯,希望各位老铁们能喜欢,你们一起来学习一下吧!

Placeholder(占位符) 用来对可输入字段的期望值提供提示信息,目前已经得到主流浏览器的广泛支持。这个属性适用于 <textarea>多行文本框和 type属性值为 text, password, search, tel, url 或者 email 等的 <input>。使用方式非常简单:

<input id="name" name="name" placeholder="请输入用户名" type="text">

通常我们给input定义的样式是针对输入框里的输入值的,而针对这个提示信息的样式如何修改呢?

css3本来提供了一个::placeholder伪类选择器

input::placeholder {    color: #999;}

但目前支持它的浏览器很少,所以需要根据不同的浏览器进行不同的定义

input::-webkit-input-placeholder { /* Chrome/Safari/Opera */  color: green;}input::-moz-placeholder { /* Firefox 19+ */  color: green;}input:-ms-input-placeholder { /* IE 10+ 注意这里只有一个冒号 */  color: green;}

如果需要兼容老版本的 Firefox 浏览器,还需要添加下面这种只有一个冒号的样式规则:

input:-moz-placeholder { /* Firefox 4 - 18 */  color: green;}

从 Firefox 19 开始一个冒号的伪类定义方式 :-moz-placeholder 被废弃了,升级为两个冒号的伪元素定义方式,不仅如此,还添加了一个默认的 opacity: 0.54 不透明度样式。根据不同的需求可以覆盖掉该样式,否则文字是半透明的:

input::-moz-placeholder {  color: green;  opacity: 1;}

完整地修改placeholder的样式如下:

input::-webkit-input-placeholder { /* Chrome/Safari/Opera */  color: green;}input:-moz-placeholder { /* Firefox 4 - 18 */  color: green;}input::-moz-placeholder { /* Firefox 19+ */  color: green;  opacity: 1;}input:-ms-input-placeholder { /* IE 10+ 注意这里只有一个冒号 */  color: green;}

以上同样适用于textarea:...

Tips:

以上代码不能如下连起来写噢

::-webkit-input-placeholder,::-moz-placeholder {  color: green;}

这样写会被某个浏览器不识别其中一个或多个选择器,而造成整个css样式失效!

介绍一下其它平台对placeholder是如何修改其样式的

微信小程序placeholder样式

input::-webkit-input-placeholder {    color: #999;}input::-moz-placeholder {    color: #999;}input:-ms-input-placeholder {    color: #999;}
Element UI
::v-deep {    .el-input__inner {       &::placeholder {          color: green;       }    }}

标签: #图片占位符更改图片