如何修改input placeholder属性中的字体样式

来源：互联网 2023-03-17 00:22:21 184

以往，我们在给input赋值时，一般会用value属性，但是当光标放入input中，却不能够使文本消息，这就需要用到placeholder属性了，那么如何给这个属性的默认值修改字体样式呢？

工具/原料

首先，我们先打开Visual Studio Code写HTML代码软件

如何修改input placeholder属性中的字体样式

在当前写的HTML代码中插入input>标签，type属性为text，给placeholder赋值为“账户”

如何修改input placeholder属性中的字体样式

然后开始对input输入框定义最基本的外观样式，例如边框，内阴影，边角，宽高，以及位置等属性

如何修改input placeholder属性中的字体样式

这时就会发现如果对input定义color属性，并不会改变placeholder的字体颜色，所以就需要对其进行额外定义属性了。在样式中插入input::-webkit-input-placeholder，并定义color:red

如何修改input placeholder属性中的字体样式

当然，只定义color属性是不够的，还可以定义字体大小和位置等

如何修改input placeholder属性中的字体样式

为了能够使placeholder适配多种浏览器，我们可以对以上代码进行复制，并修改为moz、ms等，注意浏览器版本不同，input后跟随的【:】和【::】符号也是不同的哦

如何修改input placeholder属性中的字体样式

6本页面未经授权抓取自百度经验

最后我们input样式名称增加到html页面中，来看看生成的最终效果吧

如何修改input placeholder属性中的字体样式

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！