web和微信小程序设置placeholder样式

文章目录

一、场景

在页面布局时经常会用到

input

输入框，有时为了提示用户输入正确的信息，需要用

placeholder

属性加以说明。

二、

web

2.1、概念

placeholder

是

HTML5

中新增的一个属性，需要注意浏览器的兼容性。。

placeholder

可以用来描述输入字段预期值的简短的提示信息。提示信息会在用户输入值之前显示，一旦用户输入信息该提示就会自动消失。比如：我们在登录时需要输入用户名和密码，它会提示你什么地方输入用户名，什么地方输入密码，这个就是使用的

placeholder

属性。

注意：

placeholder

属性适用于下面的

input

类型：

text

、

search

、

url

、

tel

、

email

和

password

。

2.2、用法

语法：

placeholder="你想要提示的内容"

可以直接在需要提示的

input

输入框中加上

placeholder

属性，比如：

<inputtype="text"id="input"placeholder="请输入用户名"/>

如图所示，

input

输入框里面提示用户输入用户名

2.3、样式

input::-webkit-input-placeholder{你想要修改的样式}
::-webkit-input-placeholder{} /* 使用webkit内核的浏览器 */
:-moz-placeholder{} /* Firefox版本4-18 */
::-moz-placeholder{} /* Firefox版本19+ */
:-ms-input-placeholder{} /* IE浏览器 */

修改

placeholder

样式，将

input

提示框中文字的颜色设为红色，字体设为

20px

，让文字在输入框中水平居中显示。代码如下：

#input::-webkit-input-placeholder{color: red;font-size: 20px;text-align: center;}#input:-moz-placeholder{color: red;font-size: 20px;text-align: center;}#input:-ms-input-placeholder{color: red;font-size: 20px;text-align: center;}

注意注意注意

如果在某些公共样式中，已经对

placeholder

的样式进行了设置，再次对

placeholder

的样式进行设置时，就会无效。

解决方法：给样式加

!important

增加权重即可。

三、小程序

在小程序中设置

placeholder

样式需要使用组件的内置属性。可以通过以下方式设置

input

和

textarea

的

placeholder

样式：

<!-- input组件 --><inputplaceholder-style="color:#999;font-size:14px;"/><!-- textarea组件 --><textareaplaceholder-style="color:#999;font-size:14px;"></textarea>

在上面的示例中，

placeholder-style

属性被设置为一个字符串，包含了

CSS

样式。在这个字符串中，您可以设置任何

CSS

样式属性，例如颜色、字体大小、字体样式等。

四、最后

本人每篇文章都是一字一句码出来，希望大佬们多提提意见。顺手来个三连击，点赞👍收藏💖关注✨。创作不易，给我打打气，加加油☕