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